当存储中的对象更改时，ExtJS 刷新网格

Question

我有一个包含对象的商店，我有一个带有这个商店的视图模型，我有一个网格，其中商店绑定到这个视图模型商店。

示例：（在我的情况下，对象要复杂得多）

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';

那么，当我更改 house 的值时，如何让我的网格更新？

Answer 1

当 store 改变时，ExtJS 会自动刷新网格。当您的数据以 JSON 对象check documentation here 形式出现时，您在模型定义中使用了mapping 的问题。当您像这样设置字段时，如果您修改商店数据，网格将自动反映更改。

检查下面的代码，在最后注释掉这两行，看看它们在执行时的区别。你可以找到这个简化的例子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');