ExtJs 7.5.0.55中TypeError读取null的value属性报错排查

架构老林

2026-6-30

ExtJS 7.5.0.55: TypeError: Cannot read properties of null (reading 'value') 解决方案

问题背景

在ExtJS 7.5.0.55环境下，删除Grid Store中的记录后，Ext.grid.CellEditor关联的Ext.form.field.Text组件实例仍存在，但对应的DOM节点已从DOM树中移除。后续触发组件的getValue方法时，因访问this.dom.value抛出TypeError: Cannot read properties of null (reading 'value')错误，且仅隐藏CellEditor无法解决问题。

解决方案

1. 重写Text组件的`getValue`方法，增加DOM存在性检查

直接在报错源头添加防御性判断，避免访问不存在的DOM节点：

Ext.define('MyApp.overrides.form.field.Text', {
    override: 'Ext.form.field.Text',
    
    getValue: function(asNumber) {
        if (!this.dom) {
            return asNumber ? 0 : ''; // 返回对应类型的默认值
        }
        return this.callParent(arguments);
    }
});

2. 删除记录前主动销毁激活的CellEditor

从根源上避免组件实例与DOM分离的情况，删除记录前先销毁当前激活的CellEditor：

// 获取Grid和CellEditing插件
var grid = Ext.getCmp('yourGridComponentId');
var cellEditingPlugin = grid.getPlugin('cellediting');

// 检查是否有激活的编辑器并销毁
if (cellEditingPlugin && cellEditingPlugin.getActiveEditor()) {
    cellEditingPlugin.getActiveEditor().destroy();
}

// 执行记录删除操作
grid.getStore().remove(targetRecord);

3. 拦截`checkChange`事件，阻止DOM不存在时的执行

错误堆栈显示报错由checkChange方法触发，重写该方法添加DOM检查：

Ext.define('MyApp.overrides.form.field.Text', {
    override: 'Ext.form.field.Text',
    
    checkChange: function() {
        if (!this.dom) {
            return;
        }
        this.callParent(arguments);
    }
});