绑定网格和表单 ExtJs 6

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

标签字段实际上只设计用于数组或逗号分隔的列表； 看起来您正在尝试使用关联，如果有更多开箱即用的支持，那就太好了。

我已经尝试过了，在显示方面让它正常工作，但是保存值实际上取决于您计划如何将值同步到服务器，如果您要在内置代理等中使用，那么这将呈现一个完全不同的挑战。我想要一个类似的组件用于我自己的应用程序，我会进一步考虑，甚至可能为此创建一个 UX。

我认为你有几个问题，一个是让你的关联正常工作，然后你需要让你的标签字段按预期工作。

这里是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