在ExtJS 4中实现多对多关联

此问题在上一节课之前已被问过两次，因此：

但这两个问题都没有实际答案，所以我要再试一次

假设我有两个模型，

User

和

Group

。一个用户可以在多个组中，并且组可以包含多个用户。以下是

用户

的型号代码：

Ext.define('User', {
    extend: 'Ext.data.Model',
    alias: 'model.User',
    fields: [
        {name: 'username', type: 'string'},
        ...
    ],
    proxy: {
        // Omitted for brevity...
    },
});

和

组

：

Ext.define('Group', {
    extend: 'Ext.data.Model',
    alias: 'model.Group',
    fields: [
        {name: 'name', type: 'string'},
        ...
    ],
    proxy: {
        // Omitted for brevity...
    },
});

associations: [
    {type: 'hasMany', model: 'GroupUsers', name: 'group_users'}
],

group.group_users()

associations: [
    {type: 'hasMany', model: 'User', name: 'users', foreignKey: '???'}
],

现在，假设我想要一个列出我的组的网格，并允许我双击一个组并在第二个网格中编辑该组中的哪些用户

假设每个组有很多用户，所以我不想在加载组时加载所有关联的用户

我希望能够获得特定组的用户存储，并将其提供给我的网格，网格将根据需要加载数据（使用网格通常的分页方式）

我在这里看到两种可能的方法。也许还有其他更好的方法，但我将在下面概述我迄今为止所做的尝试

中级车型

• 添加另一个连接模型
• 将

  用户

  和

  组

  中的许多关联添加到该模型中
• 将

  belongsTo

  关联从我的加入模式添加回

  User

  和

  Group

连接型号代码：

Ext.define('GroupUsers', {
    extend: 'Ext.data.Model',
    alias: 'model.GroupUsers',
    fields: [
        {name: 'group_id', type: 'int'},
        {name: 'user_id', type: 'int'},
    ],
    associations: [
        {type: 'belongsTo', model: 'User'},
        {type: 'belongsTo', model: 'Group'}
    ],
    ...
});

组中的关联

：

Ext.define('Group', {
    extend: 'Ext.data.Model',
    alias: 'model.Group',
    fields: [
        {name: 'name', type: 'string'},
        ...
    ],
    proxy: {
        // Omitted for brevity...
    },
});

associations: [
    {type: 'hasMany', model: 'GroupUsers', name: 'group_users'}
],

group.group_users()

associations: [
    {type: 'hasMany', model: 'User', name: 'users', foreignKey: '???'}
],

我现在可以访问特定

组的
GroupUsers
存储：

Ext.define('Group', {
    extend: 'Ext.data.Model',
    alias: 'model.Group',
    fields: [
        {name: 'name', type: 'string'},
        ...
    ],
    proxy: {
        // Omitted for brevity...
    },
});

associations: [
    {type: 'hasMany', model: 'GroupUsers', name: 'group_users'}
],

group.group_users()

associations: [
    {type: 'hasMany', model: 'User', name: 'users', foreignKey: '???'}
],

这种方法的问题在于，我不能将
GroupUsers
的存储绑定到第二个网格，因为我想显示像用户名这样的内容。我可以迭代商店的项目，使用
getUser（）
获取每个
User
对象，将它们添加到另一个商店，并将其用于我的网格，但这会导致每个项目的服务器请求！或者，我可以直接使用我的
GroupUsers
存储库，但随后需要使用渲染器，我仍然需要分别获取每个
用户

直接关联


将
用户
和
组
与
直接关联，每个
都有许多关联


组上的关联
：

Ext.define('Group', {
    extend: 'Ext.data.Model',
    alias: 'model.Group',
    fields: [
        {name: 'name', type: 'string'},
        ...
    ],
    proxy: {
        // Omitted for brevity...
    },
});

associations: [
    {type: 'hasMany', model: 'GroupUsers', name: 'group_users'}
],

group.group_users()

associations: [
    {type: 'hasMany', model: 'User', name: 'users', foreignKey: '???'}
],

现在，我可以为给定组获取实际
用户
对象的存储：

group.users()

那太好了，不过我没有什么可以设置协会的
外键<代码>用户
不能有
组id
字段，因为
用户
可以有许多
组
s
 也许这不是你想要的答案，但这就是我解决这个问题的方法：

我不会将组和用户与extjs商店关联起来，而是在服务器端

在网格的控制器中放置如下内容：

init: function(){
    this.control({
        'grid': {itemdblclick: this.onGridItemdblclick}
    })
},
onGridItemdblclick: function(grid, record){
    var group_id = record.getId(),
    usersStore = this.getStore('Users');
    usersStore.load({params: {group_id: group_id}});
    var win = Ext.widget('UsersGrid'); // adapt the code to your naming scheme
    win.show();
}

加载
用户
存储的请求将与额外的参数
组id
一起发送。在服务器端，您可以使用这个额外的参数来筛选用户。
在我看来，假设我们拥有具有结构GroupId、GroupName、UserId、UserName（使用join获取所有记录的组合存储）的存储信息。假设我们有一个网格来显示按GroupId分组的记录并显示组列表，当展开时显示该组下的用户列表。现在，假设单击一个按钮将重新排列存储并更新网格显示以显示用户列表，当展开显示用户所在的组列表时。这背后的总逻辑可以通过商店的filterBy和grouping网格实现feature@MohammadAftabUddin谢谢你的建议，但它并没有真正回答问题，我说过我不想预先加载所有数据。这可能不是你的解决方案，但只是为了记录，ExtJS 5支持关联。