如何在Ext JS 6中为锁定网格条件性应用自定义加载遮罩Mixin

没问题，在Ext JS 6里给锁定网格（locked grid）条件性应用自定义加载遮罩Mixin，这里有几个靠谱的实现方案，你可以根据自己的业务场景来选：

这个方案适合在组件实例化时根据配置或业务逻辑动态决定是否应用Mixin，灵活性拉满。

首先确保你的自定义Mixin已经正确定义：

Ext.define('MyApp.mixin.LoadMask', {
    mixins: ['Ext.mixin.Observable'],
    
    showCustomLoadMask: function() {
        // 这里写你的自定义加载遮罩展示逻辑
        // 比如针对锁定网格的特殊布局做适配
    },
    
    hideCustomLoadMask: function() {
        // 对应的隐藏遮罩逻辑
    }
});

接下来在锁定网格的类中，通过initComponent方法做条件判断并混入：

Ext.define('MyApp.view.LockedGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'lockedgrid',
    locked: true, // 标记为锁定网格
    
    config: {
        // 新增一个配置项，用来控制是否应用Mixin
        applyCustomLoadMask: false
    },
    
    initComponent: function() {
        // 获取条件判断值，可以是配置项、全局变量或业务逻辑返回值
        var shouldApply = this.getApplyCustomLoadMask();
        
        if (shouldApply) {
            // 将Mixin的方法混入当前网格实例
            Ext.apply(this, MyApp.mixin.LoadMask.prototype);
            // 如果Mixin依赖Observable初始化，记得调用Mixin的构造函数
            MyApp.mixin.LoadMask.prototype.constructor.call(this);
        }
        
        // 不要忘记调用父类的initComponent
        this.callParent(arguments);
    }
});

如果你的条件是在类定义阶段就能确定的（比如全局配置开关），可以直接在类的mixins配置里做条件判断：

// 先根据条件确定是否需要混入
var loadMaskMixin = {};
if (MyApp.Config.useCustomLoadMask) { // 假设这是全局配置项
    loadMaskMixin['MyApp.mixin.LoadMask'] = true;
}

Ext.define('MyApp.view.LockedGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'lockedgrid',
    locked: true,
    mixins: loadMaskMixin,
    
    // 其他组件配置...
});

要注意，Ext JS的锁定网格实际上是由两个独立的网格组件组成的：lockedGrid（左侧锁定列部分）和normalGrid（右侧普通列部分）。如果需要给整个锁定网格都应用遮罩，要确保Mixin同时应用到这两个实例上：

initComponent: function() {
    this.callParent(arguments);
    
    var shouldApply = this.getApplyCustomLoadMask();
    if (shouldApply) {
        // 处理锁定列网格
        Ext.apply(this.lockedGrid, MyApp.mixin.LoadMask.prototype);
        MyApp.mixin.LoadMask.prototype.constructor.call(this.lockedGrid);
        
        // 处理普通列网格
        Ext.apply(this.normalGrid, MyApp.mixin.LoadMask.prototype);
        MyApp.mixin.LoadMask.prototype.constructor.call(this.normalGrid);
    }
}

这样不管是锁定部分还是普通部分，都能正常使用自定义的加载遮罩方法了。

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