Ext JS 4 - come creare più istanze di negozio e assegnarle alle viste? (MVC)

Question

Come si creano istanze uniche di negozi e li si assegnano alle viste (sto bene con la creazione di viste e/o controllori univoci se necessario)?

Un caso di utilizzo semplice: desidero aprire più grid (dello stesso tipo) con un elenco di record da un negozio in ciascuno. Ogni griglia dovrebbe avere la propria istanza di negozio, perché potrebbe avere il proprio elenco di record, il proprio filtro ecc.

Ho provato questo, ma non funziona, le mie griglie non disegnano:

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

È necessario assegnare il negozio quando il componente è in fase di inizializzazione (o prima). Nel 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(); 
    } 
    //... 
}); 

Si potrebbe anche fare in questo modo:

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

Edit per voi esempio specifico:

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