Ext JS LoadMask含锁定列时无法覆盖完整Grid问题求助

问题现象：当Ext.grid.Panel中配置了locked: true的列时，Ext.LoadMask仅能覆盖未锁定列的区域，无法覆盖整个Grid组件；未配置锁定列时，LoadMask功能正常。

原问题代码示例：

const store = Ext.create('Ext.data.Store', {
    data: [{
        firstname: "Michael",
        lastname: "Scott"
    }, {
        firstname: "Dwight",
        lastname: "Schrute"
    }, {
        firstname: "Jim",
        lastname: "Halpert"
    }, {
        firstname: "Kevin",
        lastname: "Malone"
    }, {
        firstname: "Angela",
        lastname: "Martin"
    }]
});

const grid = Ext.create('Ext.grid.Panel', {
    title: 'Action Column Demo',
    store: store,
    columns: [{
        text: 'First Name',
        dataIndex: 'firstname',
        width: 150,
        locked: true, // 锁定列触发LoadMask问题
    }, {
        text: 'Last Name',
        dataIndex: 'lastname',
        width: 200,
    }, ],
    width: 300,
    renderTo: Ext.getBody()
});

new Ext.LoadMask({
    target: grid,
}).show();

问题原因：带有锁定列的Grid会被渲染为两个独立的子容器（锁定列容器与普通列容器），默认将LoadMask绑定到Grid实例时，仅会作用于普通列的容器，遗漏了锁定列的区域。

修复方案 #

方案1：绑定LoadMask到Grid的外层元素

将LoadMask的目标改为Grid的外层DOM元素，这样可以覆盖整个Grid的渲染区域：

new Ext.LoadMask({
    target: grid.getEl(), // 绑定到Grid的外层容器
}).show();

方案2：为两个子容器分别添加LoadMask

手动为主Grid和锁定列对应的子Grid都创建LoadMask，确保两个区域都被覆盖：

// 为主Grid添加遮罩
const mainMask = new Ext.LoadMask({ target: grid });
// 为锁定列的子Grid添加遮罩
const lockedMask = new Ext.LoadMask({ target: grid.lockedGrid });

mainMask.show();
lockedMask.show();

两种方案都可以解决LoadMask无法覆盖整个带锁定列Grid的问题，可根据实际场景选择使用。

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