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

Answer 1

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

Answer 2

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/