将列表组件添加到视图后，Sencha Touch空白屏幕

Question

我正在尝试将列表组件添加到Sencha Touch中的视图。直到我尝试添加list组件，应用程序才能正常运行。在将列表添加到视图后，应用程序加载(显示闪屏)，然后只显示一个白屏。

我使用的是Sencha Touch、XCode 4、iOS 5SDK和PhoneGap 1.3.0。

提前感谢！

以下是视图的代码：

plantanalyzer.views.BuildingList = Ext.extend(Ext.Panel, {
dockedItems: [{
            dock: 'top',
            html: '<img src="images/logo.jpg"/>'
        },
        {
        xtype: 'list',
        itemTpl : '{name}',
        grouped : true,
        indexBar: true,
        store: newStore

    }]
});

以及我的测试数据存储的代码。我在index.html的头脑中有这样的想法：

var newStore;

    function onBodyLoad(){
        Ext.regModel('Plants', {
            fields: ['name', 'efficiency']
        });

        newStore = new Ext.data.JsonStore({
            model  : 'Plants',
            sorters: 'name',

            getGroupString : function(record) {
                return record.get('name')[0];
            },

            data: [
                {name: 'Milwaukee',   efficiency: .85},
                {name: 'New York',    efficiency: .65},
                {name: 'St Paul',     efficiency: .73},
                {name: 'Phoenix',     efficiency: .35},
                {name: 'Los Angeles', efficiency: .45},
                {name: 'Miami',       efficiency: .75},
                {name: 'London',      efficiency: .39},
                {name: 'Moscow',      efficiency: .95},
                {name: 'Hogwarts',    efficiency: .99}
            ]
        });
    }

Answer 1

您可以在主体加载时创建存储，即在加载列表之后创建存储，以便在需要列表时newStore对象为空。放入下面的代码：

 Ext.regModel('Plants', {
        fields: ['name', 'efficiency']
    });

    newStore = new Ext.data.JsonStore({
        model  : 'Plants',
        sorters: 'name',

        getGroupString : function(record) {
            return record.get('name')[0];
        },

        data: [
            {name: 'Milwaukee',   efficiency: .85},
            {name: 'New York',    efficiency: .65},
            {name: 'St Paul',     efficiency: .73},
            {name: 'Phoenix',     efficiency: .35},
            {name: 'Los Angeles', efficiency: .45},
            {name: 'Miami',       efficiency: .75},
            {name: 'London',      efficiency: .39},
            {name: 'Moscow',      efficiency: .95},
            {name: 'Hogwarts',    efficiency: .99}
        ]
    });

在此之前：

plantanalyzer.views.BuildingList = Ext.extend(Ext.Panel, {
dockedItems: [{
            dock: 'top',
            html: '<img src="images/logo.jpg"/>'
        },
        {
        xtype: 'list',
        itemTpl : '{name}',
        grouped : true,
        indexBar: true,
        store: newStore

    }]
});

来检查是否真的是这样。

另一个建议是您应该将列表放在面板的项目中，而不是dockedItems中。顺便说一句，你的代码结构不好。你应该遵循MVC模式。检查此https://vimeo.com/17705448和此http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/。