Question

我正在尝试将List组件添加到Sencha Touch中的视图中。应用程序正常运行，直到我尝试添加列表组件。将列表添加到视图后，应用程序将加载（显示启动画面），然后仅显示白屏。

我正在使用Sencha Touch，XCode 4，iOS 5 SDK和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/。

添加列表组件后，Sencha Touch黑屏

1 个答案: