来自单个模型数组字段的 ExtJS 网格复选框答案

【问题标题】：ExtJS Grid Checkboxes from single model array field来自单个模型数组字段的 ExtJS 网格复选框
【发布时间】：2017-12-11 15:48:02
【问题描述】：

我有一个模型和存储设置来从服务器接收 JSON 数据。服务器正在发送一个作为枚举集的字段。我的模型将该字段作为数组接收。我有一个网格，其中每个可能的枚举值（只有 3 个值）的列作为网格中的复选框，我希望复选框显示数组中是否设置了枚举。当用户更新复选框时，需要更新记录。

在 ExtJS 6 中执行此操作的适当方法是什么？我看过计算和转换，但这似乎只对显示数据有帮助，它看起来对更新记录没有帮助。

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

【问题讨论】：

标签： extjs extjs6

【解决方案1】：

我猜你正在搜索的是serialize 方法：

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

【讨论】：