Question

我有一个网格填充来自视图模型的记录（来自Java restful Web服务的Ajax代理数据）。当我选择打开网格表格中的记录并显示字段时。可以使用表单编辑记录。我有一个标记字段绑定到商店，我应该能够在用户选择记录时填充与记录关联的数据。

"data" : [ {
"createdOn" : 1475678859000,
"updatedOn" : 1475679885000,
"updatedBy" : null,
"id" : 174,
"userName" : "ffff,
"firstName" : "gg",
"lastName" : "ggg",

"salesDepartment" : [ {
  "id" : 3,
  "code" : "FC",
  "name" : "Fiat-Chrysler",
  "departmentHead" : "xxx",
  "applicationCode" : null} ],}

我需要绑定销售部门对象的id值。我该怎么做到这一点。请帮帮我。

  {xtype: 'tagfield',
   anchor: '100%',
   reference: 'salesDept',
   fieldLabel: 'Sales Dept\'s',
   name: 'salesDepartment',
   allowBlank: false,
   displayField: 'name',
   valueField: 'id',
   bind: {
          value: '{record.salesDepartmentIds}',
          store: '{SalesDepartmentStore}'},
          }

Answer 1

标记字段实际上只用于处理数组或逗号分隔列表; 看起来你正试图使用关联，如果有更多支持开箱即用的话会很好。

我已经开始了，并且在显示方面让它工作但是保存值将真正取决于您计划如何将值同步到服务器，如果您要在内置代理中使用等等那么这将呈现一个完全不同的挑战。我想为自己的应用程序提供类似的组件，我会进一步思考，甚至可以为此创建一个用户体验。

我认为你在这里有几个问题，一个是让你的协会正常工作，然后你需要让你的标记字段按预期工作。

以下是fiddle

关键部分是：

扩展标记字段：

Ext.define('RelatedTagField', {
    extend: 'Ext.form.field.Tag',
    xtype: 'rtagfield',
    config: {
        relatedStore: null
    },
    setValue: function (val) {
        this.setRelatedStore(val);
        var value;
        if (val && val.isStore) {
            value = val.collect('id');

        } else {
            value = '';
        }
        this.callParent([value]);
    },
    getValue: function () {
        return this.relatedStore;
    },
    onBindStore: function () {
        this.callParent(arguments);

        this.on('select', function (tagfield, selection) {
            var selectedIds = [];
            //add any new selections
            Ext.each(selection, function (rec) {
                var rrec = this.relatedStore.getById(rec.id);
                if (!rrec) {
                    this.relatedStore.add(rec.data)
                }
                selectedIds.push(rec.id);
            }, this);
            //remove any not selected anymore
            this.relatedStore.each(function (rrec) {
                if (selectedIds.indexOf(rrec.id) == -1) {
                    this.relatedStore.remove(rrec);
                }
            }, this);
        }, this);
    },

})

绑定值：

        {
            xtype: 'rtagfield',
            fieldLabel: 'Sales Department',
            name: 'id',
            displayField: 'name',
            valueField: 'id',
            bind: {
                store: '{salesDepartment}',
                value: '{record.salesDepartment}'
            }
        },

为关联添加定义：

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    alias: 'model.user',
    hasMany: [{
        model: 'MyApp.model.SalesDepartmentModel',
        associationKey: 'salesDepartment',
        role: 'salesDepartment'
    }],
    requires: [
        'Ext.data.field.String'
    ],

    fields: [{
        type: 'string',
        name: 'userName'
    }, {
        type: 'string',
        name: 'firstName'
    }, {
        type: 'string',
        name: 'lastName'
    }, {
        name: 'salesDepartment'
    }, {
        name: 'roles'
    }, {
        type: 'string',
        name: 'email'
    }, {
        name: 'notificationFrequencyId'
    }]
});

进一步阅读

我建议您在associations和tagfield source code

上阅读更多内容

在将记录保存回服务器方面，我建议您查看sessions

绑定网格和表单ExtJs 6

1 个答案: