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商店。然后在store: {type: 'alerts'}中将其用作AlertsList。如上所述here，这会为您创建一个商店实例。此外，我发现应用程序布局存在一些问题，因此我将此代码的简短版本附加到我的更改中：

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