Javascript Sencha 2.4.1-不显示项目的列表

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

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

下面是代码片段，我无法找出哪里出错了

员工列表视图

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

员工模式

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

}
});

---

员工商店中的模型应为“MyApp.Model.employee”，不是吗？如果这没用，看看你在店里买了什么？存储区是否加载了预期记录？

设置列表工作的宽度和高度属性

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

config:{
宽度：“100%”，
高度：“100%”，
itemTpl:Ext.XTemplate（“{firstname}{lastname}”），
商店：“emp_商店”
}

正如您所提到的，您必须通过添加

高度

和

宽度

来给列表增加一些大小，但是由于您引用的是

xtype

，而不是该xtype的一个实例，因此您的商店不会加载到列表中。

因此，您的

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

    }
});

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

而你的

雇主

是这样的：

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

    }
});

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

Ext.define（'MyApp.view.EmpList'{
扩展：“Ext.List”，
xtype:“emp_列表”，
配置：{
宽度：“100%”，
高度：“100%”，
itemTpl:Ext.XTemplate（“{firstname}”）
}
});

---

演示：

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

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

---

更正了它，仍然不工作，控制台上的Ext.getStore（'Employee'）给了我未定义的。顺便说一下，只给了存储id就行了，不需要使用Ext.create for store。我是新来sencha的，不知道它为什么有效。我认为它会自动绑定，并且实例是在启动阶段创建的，如果我们在商店数组中的app.js中列出了我们的商店？在这之前忘记标记正确的答案，问题是缺少高度和宽度属性。好的。很高兴听到问题解决了。我刚刚添加了这个，因为您的最后一个答案是Ext.getStore无法找到存储。