Ext JS 4 - how to create multiple store instances and assign to views? (MVC) - model-view-controller

Question

How do you create unique instances of stores and assign them to views (I am ok with creating unique views and/or controllers if that's required)?
A simple use case - I want to open multiple grid's (of the same type) with a list of records from a store in each. Each grid would need to have it's own store instance, because it could have it's own list of records, it's own filtering, etc. etc.
I tried this, but it does not work, my grids do not draw:
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

You need to assign the store when the component is initializing (or before). In the 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();
}
//...
});
You could also do it this way:
//Create the store
var theStore = Ext.create('App.store.Encounters');
//Create the view
var theView = Ext.create('App.view.encounter.List', {
store: theStore
});
Edit for you example specific:
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});