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

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

Hi, Even I am in similar situation. Have you found any answer to this? — Shekhar
No, unfortunately for this and several other reasons I have put my extjs development on hold and am using a different platform (non js based). — Scott Szretter

Johan Haest Johan Haest · Accepted Answer · 2012-07-06T11:51:52

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

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

1 Answers