Sencha touch 2-列表未显示

Question

我对此代码感到非常绝望，不知道为什么它不起作用。 我正在尝试从json文件加载列表。 他是我的代码：

视图：主视图

    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视图：

    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}',
        }
        ]

    }
});

模型：

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

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


});

商店：

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"
                }
            }
    }

});

当我运行代码时，应用程序加载正常，没有任何警告/错误-控制台很清楚。

Answer 1

错误行为的主要原因是该存储区之前未创建。 尝试添加以下更改。 将alias: 'store.alerts'添加到Alert存储。 然后将其用作AlertsList中的store: {type: 'alerts'} AlertsList store: {type: 'alerts'} 。 如前所述这里 ，这为您创建一个存储实例。 另外，我发现了应用布局中的一些问题，因此我在此处附上了我的代码的简短版本以及所做的更改：

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"
            }
        }
    }
});