problems with grids with same stores Ext JS

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

---

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 (ie 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

---

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

---

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/

链接地址: http://www.djcxy.com/p/27190.html

上一篇: JS dataTables.fixedHeader标题和数据之间的不同宽度

下一篇: 与同一商店的网格存在问题Ext JS