ExtJS 6.02中如何按不同关联关系将多个模型合并到单个Store

核心原理 #

基于ExtJS 6原生的Ext.data.schema.Association关联体系与Ext.data.Session数据管理机制，不需要手动遍历数据做拼接合并，只要正确配置模型关联规则，框架会自动根据外键关系把多个独立数据源的模型数据映射合并，达到预期的数据结构。 #

分场景实现配置 #

1对1关联（用户与用户详情合并） #

1. 定义两个基础模型，明确外键映射与扁平化字段规则：

   // 用户模型
   Ext.define('MyApp.model.User', {
       extend: 'Ext.data.Model',
       fields: [
           'id',
           'name',
           'userDetail', // 外键字段，存储关联的用户详情id
           // 直接映射关联对象的字段，实现扁平化效果，字段值会随关联对象自动同步
           { name: 'email', mapping: 'userDetail.email' },
           { name: 'sex', mapping: 'userDetail.sex' }
       ],
       // 配置1对1关联，外键对应用户模型上的userDetail字段
       hasOne: {
           model: 'MyApp.model.UserDetail',
           name: 'userDetail',
           foreignKey: 'userDetail'
       }
   });
   
   // 用户详情模型
   Ext.define('MyApp.model.UserDetail', {
       extend: 'Ext.data.Model',
       fields: ['id', 'email', 'sex']
   });
   

2. 配置用户Store，绑定全局Session实例：

   Ext.define('MyApp.store.UserStore', {
       extend: 'Ext.data.Store',
       model: 'MyApp.model.User',
       storeId: 'UserStore',
       session: true, // 自动绑定全局Session，用于跨Store的关联数据映射
       proxy: {
           type: 'memory',
           reader: {
               type: 'json',
               rootProperty: 'users'
           }
       }
   });
   

3. 加载两个独立数据源：先加载用户数组到用户Store，再加载用户详情数组到对应的详情Store，Session会自动匹配相同id的详情记录和用户记录，最终Store里的用户记录会自动带上扁平化的email、sex字段，完全匹配预期结构。

1对多关联（用户与帖子） #

1. 在用户模型上扩展1对多关联配置：

   Ext.define('MyApp.model.User', {
       extend: 'Ext.data.Model',
       // 前面的字段与1对1配置保持一致
       fields: ['id', 'name', 'userDetail', 'email', 'sex'],
       hasOne: 'MyApp.model.UserDetail',
       // 配置1对多关联：关联帖子模型，外键是帖子上的user字段（对应用户id），关联后的字段名叫posts
       hasMany: {
           model: 'MyApp.model.Post',
           name: 'posts',
           foreignKey: 'user'
       }
   });
   
   // 帖子模型
   Ext.define('MyApp.model.Post', {
       extend: 'Ext.data.Model',
       fields: ['id', 'user', 'title', 'body']
   });
   

2. 帖子数据源的Store同样绑定全局Session：

   Ext.define('MyApp.store.PostStore', {
       extend: 'Ext.data.Store',
       model: 'MyApp.model.Post',
       storeId: 'PostStore',
       session: true,
       proxy: {
           type: 'memory',
           reader: {
               type: 'json',
               rootProperty: 'posts'
           }
       }
   });
   

3. 分别加载用户数组、帖子数组到两个Store，Session会自动按外键把帖子分组到对应用户的posts字段下；没有匹配帖子的用户记录，框架会自动生成空的posts数组，完全匹配预期结构。

多对1关联（帖子与用户） #

实现逻辑和1对多完全对称，只需要调整关联方向：

• 在帖子模型上配置belongsTo关联，外键是帖子上的user字段对应用户id
• 加载帖子数据时，Session会自动把匹配的用户信息嵌套到帖子记录的user字段下，不需要额外写合并逻辑

多对多关联 #

实现逻辑和1对多基本一致，只需要增加中间关联表的配置：

• 配置模型关联时指定中间表的两个外键（用户id、帖子id），示例配置：

  Ext.define('MyApp.model.User', {
      // 前面的基础配置省略
      manyToMany: {
          model: 'MyApp.model.Post',
          name: 'posts',
          foreignKey: 'userId', // 中间表的用户外键
          associatedKey: 'postId', // 中间表的帖子外键
          through: 'MyApp.model.UserPost' // 中间关联表模型
      }
  });
  

• 加载中间表数据到独立Store后，Session会自动解析映射关系，把匹配的所有帖子实例关联到对应用户的posts字段下，自动去重，不需要手动做数据匹配

常见踩坑说明 #

• 确保所有用到关联模型的Store都绑定同一个Session实例，否则跨Store的关联映射不会生效
• 关联的name配置要和预期的返回字段名保持一致，比如1对多关联的name: 'posts'，最终才会在用户记录下生成posts字段
• 1对1的扁平化字段不要手动遍历数据拷贝，直接用嵌套mapping配置，能保证字段值和关联对象自动同步，避免数据不一致
• ExtJS 6.02默认开启隐式关联加载，只要关联配置正确，不需要手动触发关联数据的请求

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