Extjs5 绑定标签字段

Question

我有两个实体，用户和角色，两者都具有多对多关联。

然后我有一个显示用户列表的网格，在右侧有一个包含用户详细信息的表单，包括一个标签字段，它将显示并允许为用户选择角色。

如果标签字段的绑定设置为

bind: {
          store: '{roles}',
          value: '{mainGrid.selection.roles}'
       }

那么它不会显示用户已经拥有的角色并抛出：

“未捕获的 TypeError：parentData[association.setterName] 不是函数”

当尝试设置用户角色时

所以我也尝试将标签字段值绑定到一个公式，如

bind: {
         store: '{roles}',
         value: '{userRoles}'
      }

标签字段显示了所选用户的角色，但我不知道如何将所选角色设置回用户实体。

我的模型是：

Ext.define('App.model.security.User', {
    extend: 'App.model.Base',

    entityName: 'User',

    fields: [
        { name: 'id' },
        { name: 'email'},
        { name: 'name'},
        { name: 'enabled', type: 'bool'}
    ],

    manyToMany: {
        UserRoles: {
            type: 'Role',
            role: 'roles',
            field: 'id',
            right: {
                field: 'id',
                role: 'users'
            }
        }
    }
});

和

Ext.define('App.model.security.Role', {
    extend: 'App.model.Base',

    entityName: 'Role',

    fields: [
        { name: 'id' },
        { name: 'name'},
        { name: 'enabled', type: 'bool'}
    ],

    manyToMany: {
        RoleUsers: {
            type: 'User',
            role: 'users',
            field: 'id',
            right: {
                field: 'id',
                role: 'roles'
            }
        }
    }
});

标签字段定义：

    xtype: 'tagfield',
    fieldLabel: 'Roles',
    displayField: 'name',
    valueField: 'id',
    stacked: true,
    multiSelect: true,
    filterPickList: true,
    queryMode: 'local',
    publishes: 'value',
    bind: {
        store: '{roles}',
        value: '{userRoles}'
    }

和 ViewModel：

Ext.define('App.view.security.user.UsersModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.users',

    stores: {
        users: {
            model: 'App.model.security.User',
            pageSize: 15,
            autoLoad: true,
            session: true
        },
        roles: {
            model: 'App.model.security.Role',
            autoLoad: true,
            session: true
        }
    },

    formulas: {
        userRoles: {
            bind: {
                bindTo: '{mainGrid.selection.roles.data.items}',
                deep: true
            },

            get: function(value){
                return value;
            },

            set: function(value){
            }
       }
    }
});

这是我第一个使用 Ext 的项目，所以也许我在模型关联中缺少一些配置，我不知道。 我用谷歌搜索了很多，但缺乏有关链接标签字段的信息。 任何帮助将不胜感激。

Answer 1

好吧，我最终通过完成 setter 的缺失代码来使用公式，如下所示：

           set: function(values){
                //Delete the roles that were not established
                var del = [], noadd = [];
                var roles = this.get('mainGrid').selection.roles();
                roles.each(function(record){
                    if (values.indexOf(record.get('id')) == -1) {
                        del.push(record);
                    }
                    else {
                        noadd.push(record.get('id'));
                    }
                });
                del.forEach(function(record){
                    roles.remove(record);
                });

                //Add the roles that didn't exist
                var store = this.getStore('roles');
                var allRecords = store.getData().getSource() || store.getData();
                allRecords.each(function(record){
                    if (values.indexOf(record.get('id')) != -1 && noadd.indexOf(record.get('id')) == -1) {
                        roles.add(record);
                    }
                });
            }

我使用的那些数组在那里是因为：

(del) 不能在我正在循环的同一个集合上循环和删除

(noadd) 如果我尝试将现有记录添加到角色集合中，它不会被添加两次，但在保存时，现有记录奇怪地显示为创建，我认为这是一个 BUG。

我将把这个问题留待一段时间，所以如果你知道解决这个问题的更好方法，你可以做出贡献。

谢谢！