使用 `loader` 配置时，ExtJs 不显示 loadMask

【问题标题】：ExtJs does not display loadMask when using `loader` config使用 `loader` 配置时，ExtJs 不显示 loadMask
【发布时间】：2020-12-29 15:22:16
【问题描述】：

我正在使用 ExtJs 6.2.1。我有一个具有如下加载器配置的面板：

loadHtml: function(url, params){
    var maintab = this.getController('Main').getMainTab(),
        tab = maintab.add({
            title: params.label + (params.objectId ? ' ' + Lang._('n°') + params.objectId : ''),
            bodyPadding: 5,
            loader: {
                url: Paths.ajax + 'sav/' + url,
                params: params,
                autoLoad: true,
                loadMask: true,
                failure: Mb.Msg.loaderFailure
            },
            scrollable: 'y',
            closable: true
        });
    maintab.setActiveTab(tab)
},
// loadHtml is triggered by user interaction
// maintab is a tabpanel containing some tabs

加载掩码永远不会显示。我认为这个post on the sencha forum 是相关的。

【问题讨论】：

有一些小提琴样本吗？
没有。我没有时间。 Sencha fiddle 真的很费时间。我在问题中提供了更多背景信息。

标签： extjs extjs6 extjs6-classic extjs6.2

【解决方案1】：

ComponentLoader 中存在一个错误，它不允许同时指定选项 autoLoad: true 和 loadMask: true。 addMask 即使尚未渲染，也会在面板上调用。

为了解决这个错误，让我们在 render 事件上添加 loadMask。以下覆盖更正了该错误：

Ext.define('Mb.override.ComponentLoader', {
    override: 'Ext.ComponentLoader',
    addMask: function(mask){
        let t = this.target
        if(t.rendered) {
            t.setLoading(mask)
        } else {
            t.on('render', function () {
                t.setLoading(mask)
            })
        }
    },
});

要求：这要求面板的渲染速度比 XHR 请求获取面板内容的速度更快。

【讨论】：