Sencha 2.4.1 - 列表不显示项目

我想用静态数据在商店中使用Sencha touch 2.4.1填充列表。Sencha 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' 
     } 
    ] 

} 
});

来源

2015-01-21 mdanishs

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

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

来源

2015-01-21 11:37:54 mdanishs

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

来源

2015-01-21 09:19:29 Saki

纠正它，仍然不工作，控制台上的Ext.getStore（'Employee'）给我未定义。 – mdanishs 2015-01-21 09:22:21

正如你所说，你不得不加入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

来源

2015-01-21 11:55:43

只是给商店id工作的方式，并不需要使用Ext.create来存储。我是新来的sencha，不知道为什么它的作品。我认为它会自动绑定，并且在启动阶段创建实例，如果我们已将商店列入store数组中的app.js中？ – mdanishs 2015-01-21 13:12:31

您必须装载存储和模型在app.js文件中

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

来源

2015-01-23 11:39:23 Dinkheller

在此之前忘记标记正确的答案，问题是缺少高度和宽度属性。 – mdanishs 2015-01-23 12:43:02

好的。很高兴听到它解决了。我刚刚添加了这个，因为你最后的回答是Ext.getStore无法找到商店。 – Dinkheller 2015-01-23 16:41:54

Sencha 2.4.1 - 列表不显示项目

回答

相关问题