ExtJS refresh grid when object in store is changed

Question

I have a store which contains an object, I have a viewmodel with this store and I have a grid with store bound to this viewmodel store.

Example: (In my case object in much more complex)

const things = {car: 'Fiat', house: 'big'};

   Ext.define('MyApp.store.users', {
      extend  : 'Ext.data.Store',
      model   : 'MyApp.model.users',
      alias   : 'store.users',
      data    : [{
          name: 'john',
          things: things
      }]
   });

Ext.define('MyApp.model.users', {
   extend  : 'Ext.data.Model',
   alias   : 'model.users',
   fields: [{
      name : 'name'
   }, {
      name : 'things',
      type : 'boolean',
      calculate(d) { return isHouseBig(d.house) }
   }],
   proxy: {
      type : 'localstorage',
      id   : 'usb-devices'
   }
});

things.car = 'Ferrari';

So, how can I get my grid to update when I change for example the value of house?

Answer 1

ExtJS refreshes the grid automatically when the store is changed. The problem here that you have use mapping in the model definition when you data comes as a JSON object, check documentation here. When you set up your fields like this, if you modify store data, the grid will reflect changes automatically.

Check the following code, at the end comment out the two lines to see the difference when these are executed. You can find this simplified example here as a working fiddle.

Ext.define('MyApp.model.users', {
   extend  : 'Ext.data.Model',
   fields: [{
      name : 'name'
   },{
      name : 'things',
   },{
      name : 'car',
      // so in every model `car` will represent `things.car`
      mapping : 'things.car',
   },{
      name : 'house',
      mapping : 'things.house',
   }],
});

Ext.define('MyApp.store.users', {
    extend  : 'Ext.data.Store',
    model   : 'MyApp.model.users',
    data    : [{
      name: 'john',
      things: {car: 'Fiat', house: 'big'}
    },{
      name: 'mary',
      things: {car: 'Opel', house: 'small'}
    }],
    proxy: {
      type: 'memory'
    }
});

const usersStore = Ext.create('MyApp.store.users');

const usersGrid = Ext.create({
    xtype: 'grid',
    renderTo: Ext.getBody(),
    store: usersStore,
    width: 400,
    height: 200,
    title: 'Users',
    columns: [{
        text: 'name',
        dataIndex: 'name'
    },{
        text: 'car',
        dataIndex: 'car'
    },{
        text: 'house',
        dataIndex: 'house'
    }]
});

// uncomment these lines to see change

//usersStore.getAt(1).set('car', 'newCar');
//usersStore.getAt(1).set('house', 'newHouse');