Sencha 2.4.1 - 列表不显示项目答案

【问题标题】：Sencha 2.4.1 - List Not Displaying ItemsSencha 2.4.1 - 列表不显示项目
【发布时间】：2015-03-19 17:52:54
【问题描述】：

我正在尝试使用 Sencha touch 2.4.1 使用存储中的静态数据填充列表。

一个主视图包含标题栏和列表。该列表正在尝试从基于商店的模型 Employee 中获取数据。

以下是代码sn-ps，我不知道哪里出错了。

员工列表视图

Ext.define('MyApp.view.EmpList',{
    extend: 'Ext.List',
    xtype: 'emp_list',
    config:{
         itemTpl: Ext.XTemplate('<span>{firstname}</span>')
    }
});

员工商店

Ext.define('MyApp.store.Employee',{
extend: 'Ext.data.Store',
config:{
    storeId: 'emp_store',
    model: 'MyApp.model.Employee',
    emptyText: 'No Employees Yet!',
    data:[
        {firstname:'Danish', lastname:'Siddiqui', ranking:'1', is_manager:false},
        {firstname:'Danish', lastname:'Siddiqui1', ranking:'2', is_manager:false},
        {firstname:'Danish', lastname:'Siddiqui2', ranking:'3', is_manager:false},
        {firstname:'Danish', lastname:'Siddiqui3', ranking:'4', is_manager:false},
    ]
}

});

员工模型

Ext.define('MyApp.model.Employee',{
extend: 'Ext.data.Model',
config: {
    fields:[
        {name: 'firstname',     type:'string'},
        {name: 'lastname',      type:'string'},
        {name: 'ranking',       type:'number'},
        {name: 'is_manager',    type:'boolean', defaultValue: false}
    ]
}

});

主视图

Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires:[
    'Ext.TitleBar'
],
config: {
    items: [
        {
            xtype: 'titlebar',
            title: 'Employe Information',
            items:[
                {
                    xtype: 'button',
                    ui: 'back',
                    text: 'back'
                }
            ]
        },
        {
            xtype: 'emp_list',
            store: 'emp_store'
        }
    ]

}
});

【问题讨论】：

标签： javascript extjs model-view-controller sencha-touch sencha-touch-2

【解决方案1】：

设置列表的宽度和高度属性。

config:{
    width: '100%',
    height: '100%',
    itemTpl: Ext.XTemplate('<span>{firstname} &nbsp; {lastname}</span>'),
    store: 'emp_store'
}

【讨论】：

【解决方案2】：

员工商店中的模型应该是'MyApp.model.Employee'，不是吗？如果这没有帮助，看看你在商店里得到了什么？商店是否加载了预期的记录？

【讨论】：

已更正，仍然无法正常工作，控制台上的 Ext.getStore('Employee') 给我未定义。

【解决方案3】：

正如您所提到的，您必须通过添加 height 和 width 给您的列表一些大小，但由于您引用 xtype 而不是那个xtype。 http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.dataview.List-cfg-store

所以你的Main 视图应该是这样的：

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',
    renderTo: Ext.getBody(),
    requires: ['Ext.TitleBar'],
    config: {
        fullscreen: true,
        items: [{
            xtype: 'titlebar',
            title: 'Employe Information',
            items: [{
                xtype: 'button',
                ui: 'back',
                text: 'back'
            }]
        }, {
            xtype: 'emp_list',
            store: Ext.create('MyApp.store.Employee'),
        }]

    }
});

和你的EmpList 像这样：

Ext.define('MyApp.view.EmpList', {
    extend: 'Ext.List',
    xtype: 'emp_list',
    config: {
        width: '100%',
        height: '100%',
        itemTpl: Ext.XTemplate('<span>{firstname}</span>')
    }
});

演示：https://fiddle.sencha.com/#fiddle/gqr

【讨论】：

只是顺便给了store id，不需要使用Ext.create进行store。我是 sencha 的新手，不知道它为什么有效。我认为它会自动绑定，并且在启动阶段创建实例，如果我们在 store 数组中的 app.js 中列出了我们的商店？

【解决方案4】：

您必须在 app.js 文件中加载商店和模型

stores: ['Employee'],
models: ['Employee']

【讨论】：

忘记在此之前标记正确答案，问题是缺少高度和宽度属性。
好的。很高兴听到它解决了。我刚刚添加了这个，因为您的最后一个答案是 Ext.getStore 找不到商店。