Extjs编辑器网格复选框：如何将提交值从true/false改为1/0？

嘿，这个问题我之前踩过坑，ExtJS里要把Editor Grid复选框的提交值从布尔值改成数字1/0，有几种靠谱的实现方式，我给你拆解一下：

方案一：在Model里配置字段转换（最推荐） #

这是最符合ExtJS数据模型设计的方式，把转换逻辑放在Model层，一劳永逸。你只需要在定义Model字段时，加上serialize函数处理提交值，再用convert函数处理读取数据时的转换（保证复选框显示正常）：

Ext.define('YourApp.model.YourModel', {
    extend: 'Ext.data.Model',
    fields: [
        // 其他字段...
        {
            name: 'status', // 你的复选框对应的数据字段名
            type: 'boolean',
            // 读取后端数据时，把1/0转成true/false供组件显示
            convert: function(value) {
                return (value === 1 || value === '1') ? true : false;
            },
            // 提交数据时，把true/false转成1/0发给后端
            serialize: function(value) {
                return value ? 1 : 0;
            }
        }
    ]
});

这样不管是新增还是编辑，只要通过Store提交数据，都会自动把布尔值转换成数字，完全不用管Grid层面的逻辑。

方案二：给复选框Editor绑定change事件 #

如果不想动Model，也可以直接在Grid列的Editor里处理。当复选框状态改变时，直接把值改成1/0存到记录里，同时要加个renderer确保表格里显示正确的复选框状态：

columns: [
    // 其他列...
    {
        header: '是否启用',
        dataIndex: 'status',
        editor: {
            xtype: 'checkbox',
            listeners: {
                change: function(cb, newValue) {
                    // 获取当前编辑的记录
                    var record = cb.up('editorgrid').getSelection()[0];
                    // 把true/false替换成1/0
                    record.set('status', newValue ? 1 : 0);
                }
            }
        },
        // 渲染表格时，根据1/0显示勾选状态
        renderer: function(value) {
            return value === 1 ? 
                '<input type="checkbox" checked disabled />' : 
                '<input type="checkbox" disabled />';
        }
    }
]

方案三：在Store提交前统一处理数据 #

如果有多个复选框字段需要转换，或者想批量处理提交数据，可以监听Store的beforesync事件，在数据同步到后端前统一修改值：

var yourStore = Ext.getStore('YourStore');
yourStore.on('beforesync', function(options) {
    // 处理更新的记录
    if (options.update) {
        options.update.forEach(function(record) {
            var fieldValue = record.get('status');
            record.set('status', fieldValue ? 1 : 0);
        });
    }
    // 处理新增的记录
    if (options.create) {
        options.create.forEach(function(record) {
            var fieldValue = record.get('status');
            record.set('status', fieldValue ? 1 : 0);
        });
    }
});

小提示 #

优先选方案一，因为Model是数据的核心载体，把转换逻辑放在这里更符合ExtJS的架构设计，后续维护也更方便。如果只是临时需求或者小项目，方案二和三也能快速解决问题。

内容的提问来源于stack exchange，提问作者user9438655