ExtJS 6.2.0 带锁定列的Grid如何动态修改列头文本

问题原因 #

你报错的核心原因有两个：

1. 带锁定列的Grid会拆分为lockedGrid（锁定区域）和normalGrid（普通滚动区域）两个独立子表，直接操作根Grid的headerCt或者硬编码取items.items[0]的方式不可靠，很容易取到错误的容器
2. 你拿到目标列之后多调用了一层ownerCt.setText，相当于直接覆盖了整个列头容器的内部结构，破坏了Grid内置的滚动关联逻辑，才会触发getScrollable is not a function的报错

正确解决方案 #

方案1：通过列标识直接定位列（最稳定，无需区分是否锁定） #

优先通过列的dataIndex或者预定义的itemId定位目标列，直接调用列实例的setText方法，ExtJS会自动同步锁定/普通区域的列头展示，不需要手动处理拆分的子表：

// 方法1：通过dataIndex取列
const targetColumn = grid.getColumnManager().getHeaderByDataIndex('你的列绑定的dataIndex');
// 方法2：如果列定义时加了itemId: 'customCol'，可以用componentQuery取
// const targetColumn = grid.down('#customCol');

// 直接修改列文本
targetColumn.setText(`<font color="black">New H1 ${comboBox.value}</font>`);

方案2：按索引取锁定列 #

如果一定要按索引定位锁定列，使用Grid内置的lockedGrid属性取锁定区域的子表，不要硬编码子元素索引：

// 取锁定区域的第2列（索引从0开始计数）
const targetLockedColumn = grid.lockedGrid.headerCt.getHeaderAtIndex(1);
targetLockedColumn.setText(`<font color="black">New H1 ${comboBox.value}</font>`);

注意事项 #

如果列头文本包含HTML标签，需要确保对应列的enableTextEncode配置为false，否则HTML会被转义为纯文本显示：

// 列定义示例
{
    text: '原列头',
    dataIndex: 'xxx',
    locked: true,
    enableTextEncode: false, // 允许列头渲染HTML
    // 其他配置
}

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