problems with grids with same stores Ext JS

Question

So I have panel (lets call it fooPanel) containing a grid (lets call if fooGrid, which has some store). fooPanel can be inserted into some tabpanel. So the thing is that, it is possible for tabpanel to contain two (or more) instances of the fooPanel, with some distinct parameters. I think the problem is obvious here. since the fooGrids that are withing the panel have the same stores, as soon as I reload one store, both fooGrids are being reloaded. (since they have same stores). Is there a solution to this? Or should I limit the user to just opening one instance of fooPanel per tabpanel

Is there any reason that you need more instances? If so just change the store for each instance — sra, Jul 26 '13 at 12:07
yea there is a reason. how can I 'change the store for each instance' ? — Dimitri, Jul 26 '13 at 12:35

rixo · Accepted Answer · 2013-07-26T12:54:54.050

No easy solution except creating one store per grid. If the reason why you don't want to create multiple instances of the store is to avoid multiple loading, you could hack some sort of caching at the proxy level.

Edit Example of how to create multiple store for your grids

You can create the store instance (i.e. use Ext.create('My.Store')) yourself in the initComponent method of you grid:

Ext.define('My.Store', {
    extend: 'Ext.data.Store'
    ,fields: ['name']
    ,proxy: {
        type: 'memory'
        ,reader: 'array'
    }
    ,data: [['Foo'],['Bar'],['Baz']]
});

Ext.define('My.Grid', {
    extend: 'Ext.grid.Panel'

    ,columns: [{dataIndex: 'name'}]

    ,initComponent: function() {
        // /!\ Do that BEFORE calling parent method
        if (!this.store) {
            this.store = Ext.create('My.Store');
        }

        // ... but don't forget to call parent method            
        this.callParent(arguments);
    }
});

// Then I can create multiple grids, they will have their own store instances

Ext.create('My.Grid', {
    renderTo: Ext.getBody()
    ,height: 200
});

Ext.create('My.Grid', {
    renderTo: Ext.getBody()
    ,height: 200
});

Or you can specify a new store instance at creation time:

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody()
    ,height: 200
    ,columns: [{dataIndex: 'name'}]
    ,store: Ext.create('My.Store') // one instance
});

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody()
    ,height: 200
    ,columns: [{dataIndex: 'name'}]
    ,store: Ext.create('My.Store') // two instances!
});

But, as far as I'm concerned, I generally don't bother creating full store definitions. I configure the proxy in the model, and use inline store configuration using that model (inline configurations will be turned into their own instances, in Ext4). Example:

Ext.define('My.Grid', {
    extend: 'Ext.grid.Panel'

    ,columns: [{dataIndex: 'name'}]

    // inline store configuration
    ,store: {
        // The model takes care of the fields & proxy definition
        model: 'My.Model'

        // other params (like remoteSort, etc.)
    }
});

// Now I can create plenty of My.Grid again, that won't interfere with each other

Grid has a property store right? And each panel I instantiate will have the instance of same grid which itself will have same store. Can I have different instances of same stores for different instances of same grid. Data to stores are delivered by ASP.NET in JSON Format. Can you provide some code that shows the example of creating different instances of stores for different instances of grid? — Dimitri, Jul 26 '13 at 12:34
There are many ways to achieve that. I've added some examples in my answer, I hope one will match your use case. — rixo, Jul 26 '13 at 12:55
@rixo Thanks for the inline store suggestion--that seems like a much better way to do this. — Mark, Jan 06 '14 at 22:07
+1 ..Question for you guys.. if a person navigates away from the view that contains the grid(s), how do you remove them so they don't take up memory (is that the right word for browser or JS storage?)? — JustBeingHelpful, Jul 15 '14 at 18:29
@MacGyver Grossly knowing how a [garbage collector](http://stackoverflow.com/q/864516/1387519) works help with this kind of questions. The [destroy](http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.AbstractComponent-method-destroy) method of components should do the work to let the garbage collector kick in, and it is [called by default](http://tinyurl.com/omwf5v9) when components are removed. To build solid confidence about that, you're better off [reading the code](http://tinyurl.com/qbooc27). Inheritance, mixins et al. make it a tad more complex in Ext 4+ though. — rixo, Jul 16 '14 at 21:48

score 2 · Answer 2 · answered Jul 15 '14 at 18:22

In ExtJS 5, you can take advantage of Chained Stores. That way you can have a single source store, and other stores looking at that same store with different filters.

http://docs.sencha.com/extjs/5.0.0/whats_new/5.0/whats_new.html

http://extjs.eu/on-chained-stores/

score 1 · Answer 3 · answered Apr 17 '14 at 08:54

This post might help you

Ext.define('App.store.MyStore', {
    extend : 'Ext.data.Store',
    alias  : 'store.app-mystore', // create store alias

    // ... 
}); 

Ext.define('App.view.MyCombo', {
    extend : 'Ext.form.field.ComboBox',
    xtype  : 'app-mycombo',

   requires : [
       'App.store.myStore'
   ],

   // combo config
   store : {
       type : 'app-mystore' // store alias; type creates new instance
   }
});

http://www.sencha.com/forum/showthread.php?284388-ExtJs-4.2-Multiple-instances-of-the-same-Store&p=1040251

problems with grids with same stores Ext JS

3 Answers3