Question

Stores object is loaded dynamically via ajax request. While debugging in console I can see that Store object is filled with records but List is empty.

Code:

Viewport view

Ext.define('sample.views.Viewport', {
    extend: 'Ext.tab.Panel',

    title:   'Hello world!',

    xtype: 'viewport',

    config: {
        fullscreen: true,

        tabBar: {
            docked: 'bottom',
        },

        items: [
            { xclass: 'sample.views.wares.lists.Popular' },
        ]
    }
});

NavigationView view

Ext.define('sample.view.wares.lists.Popular', {
    extend: 'Ext.NavigationView',

    xtype: 'Popular',

    config: {       
        iconCls: 'home',
        title: 'Pop. prekės',

        items: [
            {
                xtype: 'wares',                                                         
            }
        ]   
    }
});

List view

Ext.define('sample.views.wares.lists.List', {
    extend: 'Ext.List',

    xtype: 'wares',

    config: {
        store: 'Wares', 
        itemTpl: '{Name}'
    },

    initialize: function () {
        this.config.title = sample.app.title;
    }
});    

Store object of records which was dynamically loaded via Ajax request.

Ext.define('sample.store.Wares', {
    extend: 'Ext.data.Store',

    config: {
        model: "sample.models.WaresListItem"
    }
});

Answer 1

initialize: function () {
    this.config.title = sample.app.title;
    this.callParent();
}

“this.callParent()” is important if you have initialize function, because it calls parent (‘Ext.dataview.List’ in your case) and ask it to do certain default things which are must for a List to construct. This is similar to calling super from constructor in java.

If you can move this to declaration block

this.config.title = sample.app.title;

and do it like this

config: {
    store: 'Wares', 
    itemTpl: '{Name}',
    title: sample.app.title
},

you would not need initialize block altogether