煎茶 2.4.1 - 列表不显示项目
Sencha 2.4.1 - List Not Displaying Items
我正在尝试使用 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.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'
}
]
}
});
设置列表的宽度和高度属性有效。
config:{
width: '100%',
height: '100%',
itemTpl: Ext.XTemplate('<span>{firstname} {lastname}</span>'),
store: 'emp_store'
}
员工商店中的模型应该读'MyApp.model.Employee'
,不是吗?如果这没有帮助,看看你在商店里买到了什么?存储是否加载了预期的记录?
正如您提到的,您必须通过添加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
您必须在应用程序.js文件中加载商店和模型
stores: ['Employee'],
models: ['Employee']
相关文章:
- 选中时高亮显示项目
- 如何检查切换功能是否显示项目
- 煎茶 2.4.1 - 列表不显示项目
- jquery :bxSlider 轮播活动类,用于所有显示项目(非单个)
- 对于数组 {{显示项目}} 中的每个项目
- Instagram API 和 jquery 的问题:无法显示项目
- 如何以任何给定的方式在组合框中显示项目
- 使用jquery在同一位置显示项目
- 如何继续在我的页面上添加/显示项目,同时滚动垂直栏
- 在Array Controller ember.js中显示项目
- 格式错误的HTML:如何不在空的li元素上显示项目符号
- 在树面板中显示项目的数据格式
- Jquery在
- 中显示项目列表
- 在新闻贴纸中显示项目
- Youtube V3频道搜索有结果,但不显示项目
- ExtJS组合框不能显示项目
- PaperJS旋转函数显示项目两次
- ReactJS显示项目列表
- 我如何格式化谷歌图表数据,以显示项目的计数,但按年过滤
- 使用jQuery调整大小来显示项目的大小