Ext JS Grid能否动态设置enableLocking？列重排消失问题求解

当然可以通过临时禁用锁定功能来解决这个问题，具体操作如下：

完整解决方案代码 #

// 可选：提前记录所有列的锁定状态，用于后续还原
const columnLockStates = {};
grid.columns.forEach(col => {
  columnLockStates[col.id] = col.locked;
});

// 临时禁用锁定并清理锁定容器
grid.enableLocking = false;
grid.destroyLocking();

// 执行你的列重排逻辑
grid.headerCt.suspendLayouts();
for (var i = 0; i < columns.length; i++) {
  grid.headerCt.moveAfter(columns[i], (columns[i - 1] || null));
}
grid.headerCt.resumeLayouts(true);

// 重新启用锁定功能并初始化
grid.enableLocking = true;
grid.initLocking();

// 可选：恢复之前记录的列锁定状态
grid.columns.forEach(col => {
  if (columnLockStates[col.id]) {
    col.setLocked(true);
  }
});

关键步骤说明 #

• 临时禁用锁定：当enableLocking为true时，Grid会将列拆分到锁定和非锁定两个独立容器中，直接操作headerCt的moveAfter会破坏这种容器结构，导致列无法正确渲染。调用destroyLocking()可以清理这些容器，让所有列回到主表头容器。
• 重排列：此时操作单一的主表头容器，列重排逻辑就能正常执行，不会出现列消失的问题。
• 恢复锁定（可选）：如果需要保留原有列的锁定状态，提前记录每列的locked属性，重排完成后再逐一还原即可。

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