Sencha touch 2 - list not showing up

Question

I am getting pretty desperate about this code and have no idea why it is not working. I am trying to load list from json file. He is my code:

views: main view

    Ext.define('Alerts.view.Main', {
    extend: 'Ext.Container',

    config: {

        items: [
        {
            xtype: 'toolbar',
            docked: 'top',
            title: 'Topp Toolbar',

            items: [{
                xtype: 'button',
                text: 'Alerts',
                id: 'alertsButton',
                handler : function(){
                    //alert('tap')
                    var pnl = Ext.getCmp('hiddenPanel');
                    pnl.showBy(this,"tl-bl");
                }
            }]

        },
        {
            xtype: 'AlertsList'

        },
        {
            xtype: 'panel',
            id: 'hiddenPanel',
            // We give it a left and top property to make it floating by default
            left: 0,
            top: 40,

            // Make it modal so you can click the mask to hide the overlay
            modal: true,
            hideOnMaskTap: true,

            // Make it hidden by default
            hidden: true,
            // Set the width and height of the panel
            width:  400,
            height: 400,

            // Here we specify the #id of the element we created in `index.html`
            contentEl: 'content',

            // Style the content and make it scrollable
            styleHtmlContent: true,
            scrollable: true,

            // Insert a title docked at the top with a title
            items: [
                {
                    docked: 'top',
                    xtype: 'toolbar',
                    title: 'Add new',
                    items: [{
                        iconCls: 'add',
                        iconAlign : 'right',
                        id: 'newIcon',
                        handler : function(){
                            alert('icon')
                            //var pnl = Ext.getCmp('hiddenPanel');
                            //pnl.showBy(this,"tl-bl");
                        }
                    }]
                }


            ]
        }
        ]
    }
});

AlertsList view:

    Ext.define('Alerts.view.AlertsList', {
    extend: 'Ext.Container',
    requires: 'Ext.dataview.List',
    xtype: "AlertsList",


    config: {

        fullscreen: true,
        title: 'list',
        layout: 'fit',
        items: [
        {
            xtype: 'list',
            store: 'Alert',
            itemTpl: '<h1>item<h1>{name}',
        }
        ]

    }
});

model:

Ext.define('Alerts.model.Alert', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['name', 'reason', 'enabled', 'notify', 'phone']
    }


});

store:

Ext.define("Alerts.store.Alert", {
    extend: 'Ext.data.Store',

    config: {
            model: "Alerts.model.Alert",
            autoLoad: true,

            proxy: {
                type: "ajax",
                url : "app/store/Alerts.json",
                reader: {
                    type: "json",
                    rootProperty: "alerts"
                }
            }
    }

});

When i run the code, app loads fine, without any warns/errors - console is clear.

Answer 1

The main reason of the wrong behavior is that the store was not created before. Try to add the following changes. Add alias: 'store.alerts' to Alert store. Then use it as store: {type: 'alerts'} in the AlertsList. As mentioned here, this creates a store instance for you. Also I found some issues with the app layout, so I attach here short version of your code with my changes:

Ext.define('Test.view.Main', {
    extend: 'Ext.Container',
    config: {
        layout: 'fit',
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            title: 'Topp Toolbar'
        }, {
            xtype: 'AlertsList'
        }]
    }
});
Ext.define('Test.view.AlertsList', {
    extend: 'Ext.dataview.List',
    xtype: "AlertsList",
    config: {
        store: {
            type: 'alerts'
        },
        itemTpl: '<h1>item<h1>{name}',
    }
});
Ext.define('Test.model.Alert', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['name', 'reason', 'enabled', 'notify', 'phone']
    }
});
Ext.define("Test.store.Alert", {
    extend: 'Ext.data.Store',
    alias: 'store.alerts',
    config: {
        model: "Test.model.Alert",
        autoLoad: true,
        proxy: {
            type: "ajax",
            url: "app/store/Alerts.json",
            reader: {
                type: "json",
                rootProperty: "alerts"
            }
        }
    }
});