ExtJS Grid Checkboxes from single model array field

Question

I have a model and store setup to receive JSON data from the server. The server is sending a field which is an Enum Set. My model receives that field as an array. I have a Grid with columns for each possible Enum value (there is only 3 values) as a checkbox in the grid and I want the checkbox to display whether or not the Enum is set in the array. When the user updates the checkboxes, it needs to update the record.

What is the appropriate way to do that in ExtJS 6? I have looked at calculate and convert, but that only seems helpful for displaying the data, it doesn't look like it will help with updating the record.

Ext.define('App.Model', {
    extend: 'Ext.data.Model',
    fields: [{
            name: 'enumSet',
            type: 'auto'
        }, //[A,B,C]
    ],
});

Ext.define('App.Grid', {
    extend: 'Ext.grid.Panel',

    columnConfig: function() {
        return [{
                text: 'A',
                xtype: 'checkcolumn',
                dataIndex: 'enumSet'
            },
            {
                text: 'B',
                xtype: 'checkcolumn',
                dataIndex: 'enumSet'
            },
            {
                text: 'C',
                xtype: 'checkcolumn',
                dataIndex: 'enumSet'
            },
        ];
    },
});

Alexander Alexander · Accepted Answer · 2017-12-11T18:12:56

What you are searching for is the serialize method, I guess:

Ext.define('App.Model', {
  extend: 'Ext.data.Model',
  fields: [
      {name: 'enumSet', type: 'auto', serialize: function(v, rec) {var arr = []; if(rec.get('A')) arr.push('A'); if(rec.get('B')) arr.push('B'); if(rec.get('C')) arr.push('C'); return arr; }},
      {name: 'A', convert: function(v, rec) {if(v!==undefined) return v; return rec.get("enumSet").indexOf('A')>-1},
      {name: 'B', convert: function(v, rec) {if(v!==undefined) return v; return rec.get("enumSet").indexOf('B')>-1},
      {name: 'C', convert: function(v, rec) {if(v!==undefined) return v; return rec.get("enumSet").indexOf('C')>-1}
  ],
});

ExtJS Grid Checkboxes from single model array field

1 Answers