ExtJS 4.2 ComboBox显示0而非NULL的问题求助

我之前在ExtJS 4.2项目里也碰到过一模一样的问题——当数据库字段是NULL时，ComboBox会自动把它转成0显示，提交的时候也传0，这确实挺烦人的。问题根源在于ExtJS对数字类型字段的默认处理：因为你的valueField是id（数字类型），框架会把NULL自动转换为0，而不是保留空值。

下面给你几个实用的解决方案，按推荐程度排序：

方案1：重写ComboBox的setValue和getSubmitValue方法 #

这是最直接的方式，在你的ComboBox组件里直接处理值的转换，不需要改动其他部分：

Ext.define('RgiApp.view.ImjestoTipObjektaCombo2', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.imjestoTipObjektaCombo2',
    requires: 'RgiApp.store.ImjestoTipObjektaStore2',
    fieldLabel: 'Vrsta obilježja II',
    name: 'vrstaobiljezjaid2',
    displayField: 'name',
    valueField: 'id',
    matchFieldWidth: true,
    queryMode: 'local',
    forceSelection: false,
    typeAhead: true,
    minChars: 2,
    emptyText: 'Odaberite...', // 确保emptyText配置正确
    store: 'RgiApp.store.ImjestoTipObjektaStore2',

    // 重写setValue，处理null/0的情况
    setValue: function(value) {
        // 如果值是null或者0（数据库NULL加载后可能被转成0），设置为空字符串
        if (value === null || value === 0) {
            return this.callParent(['']);
        }
        return this.callParent([value]);
    },

    // 重写getSubmitValue，提交时把空字符串转成NULL
    getSubmitValue: function() {
        var submitValue = this.callParent(arguments);
        return submitValue === '' ? null : submitValue;
    }
});

原理是：

• setValue方法把NULL/0转换成空字符串，这样ComboBox会显示你设置的emptyText，而不是0；
• getSubmitValue方法在表单提交时，把空字符串转回NULL，保证提交到后端的是正确的空值。

方案2：在Model字段里添加convert方法 #

如果你的ComboBox对应的Store有Model，可以在Model的id字段里添加转换函数，把NULL转换成undefined，这样ComboBox就不会显示0：

Ext.define('RgiApp.model.ImjestoTipObjektaModel2', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'id',
            type: 'int',
            convert: function(value) {
                // 把数据库返回的NULL转换成undefined，避免被转成0
                return value === null ? undefined : value;
            }
        },
        {name: 'name', type: 'string'}
    ]
});

这种方式适合需要在整个应用里统一处理NULL值的场景，一次配置到处生效。

方案3：表单加载前手动处理记录值 #

如果上面两种方式都不适合，你也可以在表单加载记录之前，手动把NULL字段转换成空字符串：

// 假设你拿到了要编辑的record
var editRecord = yourRecord;
if (editRecord.get('vrstaobiljezjaid2') === null) {
    // 把NULL设为空字符串
    editRecord.set('vrstaobiljezjaid2', '');
}
// 然后加载到表单
yourForm.loadRecord(editRecord);

这种方式比较零散，适合临时解决单个表单的问题，但不推荐在多个地方重复使用。

我个人最推荐方案1，因为它把逻辑封装在ComboBox组件内部，代码更集中，也不会影响其他组件的行为。

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