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

问题描述

我使用的是 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 是相关的。

解决方法

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 请求快。