Grid problems in the same Ext JS stores

Question

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

Answer 1

There is no easy solution, except to create one store for each grid. If the reason you don't want to create multiple instances of the repository is to avoid multiple downloads, you could crack some kind of proxy level caching.

Edit Example of creating multiple repositories for your grids

You can create a storage instance (i.e. use Ext.create('My.Store') ) yourself in your grid's initComponent method:

 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 during creation:

 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 know, I'm not at all worried about creating complete store definitions. I configure the proxy server in the model and use the built-in storage configuration using this model (the built-in configurations will be converted to 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

This post may 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

Answer 3

In ExtJS 5, you can use Chained Stores. This way you can have one store source and other stores that look at the 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/