Binding Grid and Form ExtJs 6

Question

I have a grid populating records from view model (Ajax proxy data from Java restful web services). When I select a record in the grid form open and the fields are displayed. The records are editable using the form. I have one tag field which is binded to a store and I should be able to populate the data associated to the record whenever the user selects a record.

"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} ],}

I need to bind the value of id from sales department object . how can I achieve this. Please help me.

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

It would be awesome if you could create quick example here fiddle.sencha.com — pagep
Here is the fiddle: fiddle.sencha.com/#view/editor&fiddle/1re7 — Imran

Theo Theo · Accepted Answer · 2017-03-06T19:09:27

Tag fields are really only designed to work with arrays or comma separated lists; It looks like you are trying to use with associations, which it would be nice if there was more support for this out of the box.

I've had a go, and in terms of displaying got it working however saving values will really depend on how you plan to sync values to the server, if you are going to use in built proxies etc. then this will present a whole different challenge. I would like a similar component for my own apps, I will think on this further and may even create a UX for this.

I think you have several issues here, one is getting your associations working properly, then you need to make your tagfield work as expected.

Here is the fiddle

And the key parts are:

An extended tagfield:

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);
    },

})

Binding the value:

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

And adding a definition for the association:

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'
    }]
});

Further reading

I suggest you read more on associations and the tagfield source code

In terms of saving records back to the server, I would recommend looking at sessions

Binding Grid and Form ExtJs 6

1 Answers