Ext JS 4 - 如何創建多個商店實例並分配給視圖？ （MVC）

Question

如何創建獨特的商店實例並將其分配給視圖（如果需要，我可以創建獨特的視圖和/或控制器）？

一個簡單的用例 - 我想打開多個網格（相同類型）與每個商店中的記錄列表。每個網格都需要有它自己的商店實例，因爲它可以擁有自己的記錄列表，它自己的過濾等等。

我試過了，但它不起作用，我的網格沒有繪製：

var theView = Ext.create('App.view.encounter.List'); 
    theView.title = 'WORC Encounters'; 
    var theStore=Ext.create('App.store.Encounters'); 
    theView.store=theStore; 
    tabhost.add({title:'WORC',items:theView}); 

    var theView = Ext.create('App.view.encounter.List'); 
    theView.title = 'NC Encounters'; 
    var theStore2=Ext.create('App.store.Encounters'); 
    theView.store=theStore2; 
    tabhost.add({title:'NC',items:theView}); 

Answer 1

您需要在組件初始化時（或之前）分配存儲。在initComponent中。

Ext.define('classname', { 
    extend: 'Ext.grid.Panel', 
    //... 
    initComponent: function() { 
     var me = this; 

     var theStore = Ext.create('App.store.Encounters'); 
     Ext.apply(me, { 
      store: theStore 
     }); 

     me.callParent(); 
    } 
    //... 
}); 

你也可以這樣來做：

//Create the store 
var theStore = Ext.create('App.store.Encounters'); 
//Create the view 
var theView = Ext.create('App.view.encounter.List', { 
    store: theStore 
}); 

編輯爲您具體的例子：

var theStore = Ext.create('App.store.Encounters'); 
var theView = Ext.create('App.view.encounter.List', { 
     title: 'WORC Encounters', 
     store: theStore 
}); 
tabhost.add({title:'WORC',items:theView}); 


var theStore2=Ext.create('App.store.Encounters'); 
var theView2 = Ext.create('App.view.encounter.List', { 
     title: 'NC Encounters', 
     store: theStore2 
}); 
tabhost.add({title:'NC',items:theView2});