Extjs5界标记域

Question

我有两个实体，用户和角色都与manyToMany相关联。

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

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

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

然后，它将不显示用户已经拥有的角色并抛出：

"Uncaught : parentDataassociation.setterName不是函数“

当尝试设置用户角色时

因此，我还尝试将tagfield值绑定到如下公式

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)如果我尝试向roles集合中添加一个现有记录--它不会被添加两次--但是在保存时间，现有记录奇怪地显示为create，我认为这是一个BUG。

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

谢谢!