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, Feb 28 '12 at 07:42
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, Feb 28 '12 at 20:20

Johan Haest · Answer 1 · 2013-02-24T14:50:29.060

3

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

edited Feb 24 '13 at 14:50

answered Jul 06 '12 at 11:51

Johan Haest

4,391
28
37

I see 1 store, so where is the second? – Scott Szretter Feb 23 '13 at 11:59
You just define the second store in your other view, it's the same way of working. There's no use of defining the second store in the same view... – Johan Haest Feb 23 '13 at 13:00
ok, so just to help me understand, it looks like the difference between your code and mine is the "Ext.apply", correct? – Scott Szretter Feb 24 '13 at 14:11
Apply does basically the same as `me.store = store`. The big difference is that i'm assigning my store at the initialization. And not after the initialization like you're doing. Look my edit for your example specific. – Johan Haest Feb 24 '13 at 14:48

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

1 Answers1