ExtJS 4 Change grid store on the fly

Question

Is it posible to change grid's store in ExtJS 4?

For example, i have two models:

User = Ext.define('User',{
 extend: 'Ext.data.Model',
 [...],
 hasMany: 'Product'
});
Product = Ext.define('Product',{
 extend: 'Ext.data.Model',
 [...]
});

and two grids. The first grid is linked with Store which uses User model and loads nested json data from backend, like

{
 users: [{
 id: 1,
 products: [
 {id: 1},
 {id: 2}
 ]
 }, {
 id: 2,
 products: [
 {id: 3},
 {id: 4},
 {id: 5}
 ]
 }]
}

All i want to get is when you click on the row in the first grid, the second grid must show products of the user, without connection to the server. All i know is that user.products(); returns a Ext.data.Store object. So the idea is to change second grid's store to user.products();, but there is no such method grid.setStore() :-)

Thanks in advance

Answer 1

I think a better solution would be to :

 grid1.on('itemclick', function(view, record) {
 grid2.reconfigure(record.products());
 );

• Justin Summerlin: reconfigure does a lot more than re-binding a store. If one has two stores of identical structure but merely wants to change the backing store for a grid, they need to get the store's Ext.grid.View by calling getView and call the bindStore method with the new store.
• pllee: @jMerliN I would advise against that because it goes against the api and you might see some weird errors. I can see a potential problem arising when grid.getStore() != grid.getView().store I haven't run through the use case but grid.store.load() would not trigger a view refresh. reconfigure is designed to allow the grid to change stores and there isn't much overhead.

Answer 2

You are looking at stores the wrong way. A store is attached to the grid forever, hence there is no grid.setStore(). You do NOT change a store for a grid, instead you change the DATA in the store for that grid.

Now, solution to your problem: You are correct with the part that you already have a instance of store with your data. ie; user.products(). Still, you will have to create a store for your grid. This store will not have any data though. Now, when you need to display products information, you need to load the grid's store with data. You can use:

• load()
• loadData()
• loadRecord()

to load data into your store. In your case, you can do the following:

myStore = user.products();
grid.getStore().loadRecords(myStore.getRange(0,myStore.getCount()),{addRecords: false});

• pllee: Changing stores on grids is a common occurrence. grid.reconfigure can be used to change the store or column model. Also addRecords defaults to "false".

Answer 3

If you want to attach a store to a grid after the grid has been created, you can use the bindStore() method.

var store = user.products();
grid.getView().bindStore(store);

Alternatively you can also use load(), loadData(), loadRecords() methods, and copy the data into your store.

Answer 4

Abdel Olakara's answer helped me out when I needed to update data on something that didn't have reconfigure (custom class inheriting from Ext.form.FieldSet).

But you don't need to specify addRecords or the range for getRange, because the defaults have us covered in this case.

This means you can do:

myStore = user.products();
grid.getStore().loadRecords(myStore.getRange());