Ext JS 4 - jak utworzyć wiele instancji sklepu i przypisać do widoków? (MVC)

Question

Jak utworzyć unikalne wystąpienia sklepów i przypisać je do widoków (jestem w porządku z tworzeniem unikalnych widoków i/lub kontrolerów, jeśli jest to wymagane)?

Prosty przypadek użycia - chcę otworzyć wiele siatek (tego samego typu) z listą rekordów ze sklepu w każdym z nich. Każda siatka musiałaby mieć własną instancję sklepu, ponieważ mogłaby mieć własną listę rekordów, własne filtrowanie itd. Itd.

Próbowałem tego, ale to nie działa, moje sieci nie rysują:

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

Musisz przypisać sklep, gdy komponent jest inicjowany (lub wcześniej). W 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(); 
    } 
    //... 
}); 

Można również zrobić to w ten sposób:

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

Edycja dla ciebie przykład szczególnych:

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});