在 ExtJS 4 中实现多对多关联答案

【问题标题】：Implementing Many-to-Many Associations in ExtJS 4在 ExtJS 4 中实现多对多关联
【发布时间】：2014-07-16 20:22:05
【问题描述】：

这个问题之前在 SO 上被问过两次：

但是这些问题都没有真正的答案，所以我要再试一次！

假设我有两个模型，User 和 Group。一个用户可以在多个组中，并且组可以包含多个用户。这是User的型号代码：

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

还有Group:

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

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

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

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

我在这里看到了两种可能的方法。可能还有另一种更好的方法，但我将在下面概述到目前为止我尝试过的操作。

中间模型

添加另一个加入模型
将 hasMany 关联从 User 和 Group 添加到该模型
将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'}
    ],
    ...
});

Group中的关联：

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

我现在可以访问GroupUsers 的商店以获取特定的Group：

group.group_users()

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

直接关联

将User 和Group 直接与每个hasMany 关联关联

Group 上的关联：

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

我现在可以存储给定组的实际 User 对象：

group.users()

这很好，除了我无法将关联的foreignKey 设置为。 User 不能有group_id 字段，因为User 可以有很多Groups！

【问题讨论】：

按照我的看法，假设我们拥有结构为 GroupId、GroupName、UserId、UserName 的商店信息（使用连接获取所有记录的组合商店）。假设我们有一个网格来显示按 GroupId 分组的记录并显示组列表，展开时显示该组下的用户列表。现在，假设单击按钮将重新排列商店并更新网格显示以显示用户列表，展开时显示用户所在组的列表。这背后的总逻辑可以用商店的 filterBy 和分组网格功能来实现
@MohammadAftabUddin 感谢您的建议，但它并没有真正回答问题，我确实说过我不想预先加载所有数据。
这对你来说可能没有解决方案，但只是为了记录，ExtJS 5 支持ManyToMany 关联。

标签： extjs extjs4 many-to-many associations extjs4.2

【解决方案1】：

也许这不是您要寻找的答案，但这就是我解决此问题的方法：

我不会使用 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();
}

加载Users 存储的请求将使用额外的参数group_id 发送。在服务器端，您可以使用这个额外的参数来过滤您的用户。

【讨论】：