绑定网格和表单 ExtJs 6

Question

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

"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 and the tagfield source code

上阅读更多内容

关于将记录保存回服务器，我建议查看 sessions

绑定网格和表单 ExtJs 6

Binding Grid and Form ExtJs 6

extjs

grid

sencha-architect

extjs6

extjs6-classic