私はこれを千通りの方法で達成しようとしましたが、Sencha Touch のドキュメントは明確でも役に立ちませんし、誰もが別の方法でやっているようです...どれも私にはうまくいきませんでした.
次の方法でリストビューを機能させることができました。
Ext.define("MyApp_eComm.view.Products", {
extend: 'Ext.navigation.View', //Needs to be navigation view to display the ProductList.js
xtype: 'products',
requires: [
'Ext.dataview.List',
'MyApp.view.ProductList',
'MyApp_eComm.view.ProductDetail'
],
config: {
title: sMY_CONST_TAB_BROWSE_TITLE,
iconCls: sMY_CONST_TAB_BROWSE_CLASS,
styleHtmlContent: true,
scrollable: true,
items: [
/*{
xtype: 'titlebar',
docked: 'top',
title: sMY_CONST_TAB_BROWSE_SUBTITLE
},*/
{
xtype: 'productlist',
title: sMY_CONST_TAB_BROWSE_SUBTITLE
}
]
}
})
これは、ナビゲーション ビューの内側にあるリスト ビューです...タブ パネルの内側です。ナビゲーション ビューを使用した理由は、開示コンポーネントから製品の詳細ビューを一番上にプッシュできるようにするためです。
Ext.define("MyApp.view.ProductList", {
extend: 'Ext.List',
xtype: 'productlist',
requires: [
'MyApp.store.ProductStore'
],
config: {
itemTpl: '{text}',
store: 'ProductStore',
onItemDisclosure: true
}
});
これが私のモデルです：
Ext.define('MyApp.model.ProductListModel', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
そして最後に、現時点ではネストされていない、テストデータを含むストアです。
Ext.define('MyApp.store.ProductStore', {
extend: 'Ext.data.Store',
config: {
model: 'MyApp.model.ProductListModel',
sorters: 'text',
data: [
{
text: 'Burgers',
},
{
text: 'Pasta',
},
{
text: 'Sausages',
},
{
text: 'Cabbage',
},
{
text: 'Lettuce',
},
{
text: 'Marmalade',
},
{
text: 'Honey',
},
{
text: 'Yogurt',
},
{
text: 'Cheese',
},
{
text: 'Milk',
},
{
text: 'Bread',
},
{
text: 'Butter',
},
{
text: 'Goats Milk',
},
{
text: 'Apple',
},
{
text: 'Oranges',
},
{
text: 'Bananas',
},
{
text: 'Jelly',
},
{
text: 'Spagetti Hoops',
},
{
text: 'Ravioli',
},
{
text: 'Wheatabix',
},
{
text: 'Cornflakes',
},
]
}
});