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

Question

我正在使用 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

loadmask 永远不会显示。我认为sencha论坛上的这篇文章是相关的。

Answer 1

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

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

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 请求获取面板内容的速度更快。