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 - 列表不顯示項目

回答

相關問題