獲取Ext.dataview.List實例以顯示在Ext.tab.Panel實例內

Question

我無法弄清楚如何在另一個對象內顯示我的Ext.dataview.List對象。如果我嘗試在視口中顯示Ext.dataview.List對象，我自己可以看到我的數據。但是，如果我試圖將其作爲另一個組件的內部組件包含，它認爲沒有數據（從HTML輸出中判斷），並且不會顯示任何內容。

所以，如果我有下面的代碼的app.js：

Ext.application({ 
    name: 'MobileUnion', 

    views:   ['LocalsList'], 
    models:   ['Local'], 
    stores:   ['Locals'], 

    launch: function() { 
     // Initialize the main view 
     var mainView = { 
       xtype: 'localslist' 
     }; 
     Ext.Viewport.add([mainView]); 
    } 
}); 

我可以設置MobileUnion.view.LocalsList這種方式，這會導致沒有列表：

Ext.define('MobileUnion.view.LocalsList', { 
    extend: 'Ext.Container', 
    alias: 'widget.localslist', 
    requires: 'Ext.dataview.List', 

    config: { 
     items: [ 
      { 
       itemId: 'localsList', 
       store: 'Locals', 
       loadingText: 'Loading Locals...', 
       emptyText: '<div>No locals found.</div>', 
       onItemDisclosure: true, 
       itemTpl: '<div>{localName}</div><div>{designation}</div>' 

      } 
     ] 
    } 
}); 

或者，我可以將它設置這種方式，導致填充的列表，而不是內部的另一個組件：

Ext.define('MobileUnion.view.LocalsList', { 
    extend: 'Ext.dataview.List', 
    alias: 'widget.localslist', 

    config: { 

       itemId: 'localsList', 
       store: 'Locals', 
       loadingText: 'Loading Locals...', 
       emptyText: '<div>No locals found.</div>', 
       onItemDisclosure: true, 
       itemTpl: '<div>{localName}</div><div>{designation}</div>' 


    } 
}); 

將R eason我試圖把這個關掉，這樣我就可以得到一個列表組件在一個標籤面板內顯示。

注：我組裝了一切，這裏小提琴：http://www.senchafiddle.com/#6nCH8

我必須失去了一些基本的東西，但在這一點上，已經通過文件走了，併購買了兩本書，其中一個我已經完全閱讀了，而另一個我正在閱讀的代碼，我仍然沒有答案。任何幫助將不勝感激。

附加代碼

應用程序/模型/ Local.js

Ext.define('MobileUnion.model.Local', { 
    extend: 'Ext.data.Model', 
    config: { 
     idProperty: 'id', 
     fields: [ 
      { name: 'id', type: 'int' }, 
      { name: 'dateCreated', type: 'date', dateFormat: 'c' }, 
      { name: 'localName', type: 'string' }, 
      { name: 'designation', type: 'string' } 
     ], 
    } 
}); 

應用/存儲/ Locals.js

Ext.define('MobileUnion.store.Locals', { 
    extend: 'Ext.data.Store', 
    requires: ['MobileUnion.model.Local'], 
    config: { 
     model: 'MobileUnion.model.Local', 
     data: [ 
      { localName: 'ABCD', designation: '123' }, 
      { localName: 'WXYZ', designation: '456' } 
     ], 
     autoLoad: true, 
     sorters: [{ property: 'dateCreated', direction: 'DESC'}] 
    } 
}); 

Answer 1

在選項1，定義一個容器，但你實際上不會添加項目給你的容器。要將您的列表添加到容器，請將xtype: 'list'添加到您的項目數組中。接下來你必須做的是設置容器佈局，否則列表不會顯示。這應該爲你工作：

Ext.define('MobileUnion.view.LocalsList', { 
    extend: 'Ext.Container', 
    alias: 'widget.localslist', 
    requires: 'Ext.dataview.List', 

    config: { 
     layout: { 
      type: 'fit' //set containers layout 
     }, 
     items: [ 
      { 
       xtype: 'list', //add xtype 
       itemId: 'localsList', 
       store: 'Locals', 
       loadingText: 'Loading Locals...', 
       emptyText: '<div>No locals found.</div>', 
       onItemDisclosure: true, 
       itemTpl: '<div>{localName}</div><div>{designation}</div>' 

      } 
     ] 
    } 
}); 

更多關於在煎茶佈局：http://docs.sencha.com/touch/2-1/#!/guide/layouts

祝你好運！