Ext JS 4 - how to create multiple instances of the repository and assign views? (MVC)

Question

How do you create unique instances of stores and assign them to views (am I fine with creating unique views and / or controllers, if necessary)?

A simple use case - I want to open several grids (of the same type) with a list of records from the repository in each. Each grid should have its own storage instance, since it can have its own list of records, its 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

, ( ). 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});