ExtJS动态添加Widget列后调用record.afterCommit致Grid崩溃求助

看起来你碰到了ExtJS动态添加Widget列后的经典同步问题——只更新了表头UI，没同步Grid的核心列元数据，导致后续数据提交触发视图更新时崩溃。我来帮你拆解下原因和解决办法：

问题核心原因 #

你通过grid.headerCt.insert(2, column)只把Widget列添加到了表头的DOM结构中，但Grid的columns数组并没有同步包含这个新列。当record.callJoined('afterCommit', [fieldName])触发视图更新时，Grid的updateColumns方法会遍历columnsToUpdate（基于grid.columns生成），但Widget列不在其中，导致查找对应DOM单元格时返回null，进而访问newCell.attributes时抛出异常。

解决方案 #

1. 同步Grid的columns数组并重新配置（推荐） #

添加列后，手动将其加入grid.columns，再调用reconfigure让Grid重新识别所有列，确保元数据和UI完全同步：

var column = Ext.create('Ext.grid.column.Widget', {
    text : '...',
    width : 200,
    onWidgetAttach: function(column, widget, record) {
        // 你的逻辑
    },
    widget: {
        xtype : 'button',
        text : '...',
        listeners: {
            click: function(me, event, eOpts) {
                // 你的逻辑
            }
        }
    }
});
// 先添加到表头
grid.headerCt.insert(2, column);
// 关键：将列加入Grid的columns数组
grid.columns.splice(2, 0, column);
// 重新配置Grid，同步列元数据
grid.reconfigure(grid.getStore(), grid.columns);

reconfigure方法会强制Grid重新初始化列结构，确保后续数据更新时能正确找到所有列的配置。

2. 在beforerender阶段直接修改columns配置 #

既然是在beforerender事件中操作，此时Grid还未完成渲染，你可以直接修改Grid的columns配置数组，让Grid初始化时自动包含这个Widget列，无需手动操作headerCt：

// 在beforerender事件回调中
var column = Ext.create('Ext.grid.column.Widget', {
    // 你的列配置
});
// 直接插入到columns数组指定位置
grid.columns.splice(2, 0, column);
// Grid会在渲染时自动处理表头和列关联

这种方式更符合ExtJS的初始化流程，避免UI和元数据脱节。

3. 临时容错修复（不推荐长期使用） #

如果项目限制无法修改列的添加方式，可临时修改ExtJS源码中的updateColumns方法，增加空值判断避免崩溃：

updateColumns: function(oldRow, newRow, columnsToUpdate, record) {
    ...
    for (colIndex = 0; colIndex < colCount; colIndex++) {
        column = columnsToUpdate[colIndex];
        cellSelector = me.getCellSelector(column);
        oldCell = oldRow.querySelector(cellSelector);
        newCell = newRow.querySelector(cellSelector);
        // 新增空值判断
        if (!newCell) continue;
        newAttrs = newCell.attributes;
        attLen = newAttrs.length;
        for (attrIndex = 0; attrIndex < attLen; attrIndex++) {
            attName = newAttrs[attrIndex].name;
            value = newAttrs[attrIndex].value;
            if (attName !== 'id' && oldCell.getAttribute(attName) !== value) {
                oldCell.setAttribute(attName, value);
            }
        }
    ...
}

注意：修改源码会影响全局，且ExtJS版本升级时需要重新同步修改，仅作为临时应急方案。

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