ExtJS 6.2 如何用数据库数据覆盖Store实例的默认数据

根据需求可分为两种实现场景，对应不同的配置方式：

场景1：全量替换原有默认数据 #

即后端返回的数据集直接覆盖Store全部内容，原有静态数据全部清除，这是store.load()的默认行为：

• 无需修改现有核心配置，直接调用store.load()即可，默认addRecords参数为false，加载时会自动清空现有数据后插入后端返回的所有记录。
• 注意检查代理配置是否正确：确保reader.rootProperty和后端返回的JSON结构匹配，示例中配置的rootProperty: 'items'要求后端返回格式为：

  {
    "total": 4,
    "items": [
      {"name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-4321"},
      // 其他记录
    ]
  }
  

场景2：增量合并更新 #

即仅覆盖后端返回的同主键记录的字段，本地存在、后端未返回的记录保留，需要做以下配置：

1. 放开代码中被注释的主键配置：

   idProperty: 'name'
   

   该配置指定name字段为记录唯一标识，Store才能识别需要更新的同一条记录。
2. 调用load时显式指定addRecords: true，告知Store不要清空现有数据，直接合并返回的记录：

   store.load({
       addRecords: true
   });
   

3. 如果需要自定义合并规则（比如仅更新指定字段），可以通过监听load事件实现：

   var store = Ext.create('Ext.data.Store', {
       fields: ['name', 'email', 'phone'],
       idProperty: 'name',
       data: [/* 原有默认静态数据 */],
       proxy: { /* 原有代理配置 */ },
       listeners: {
           load: function(store, newRecords, successful) {
               if (!successful) return;
               Ext.each(newRecords, function(newRec) {
                   const existRec = store.getById(newRec.getId());
                   if (existRec) {
                       // 仅更新手机号字段，如需全量覆盖可改为 existRec.set(newRec.getData())
                       existRec.set('phone', newRec.get('phone'));
                   } else {
                       store.add(newRec);
                   }
               });
           }
       }
   });
   

内容的提问来源于stack exchange，提问作者user5507535