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());
     );

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});

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());