Extjs 将loadmask应用于选项卡面板时面临问题

我正在尝试对选项卡面板更改事件应用

ext.getBody.loadmask（）

，如下所示：

listeners : {           
    beforetabchange : function( tabPanel, newCard, oldCard){
        Ext.suspendLayouts();
        Ext.getBody().mask("please wait..");
    },
    tabchange : function( tabPanel, newCard, oldCard){
        Ext.resumeLayouts(true);
        Ext.getBody().unmask();
    }
}

---

但是，在tabchange事件之后，掩码将在不进行调试的情况下被激活，但如果我进行调试，则可以看到掩码

在没有调试的情况下，动作发生得太快，要在没有调试的情况下看到动作，您需要添加1秒的延迟

工作

---

经过一些研究，我没有找到简单的解决办法。
所以我在loadMask渲染后实现了重新激活选项卡

listeners: {
    beforetabchange: function(me, newTab, oldTab)
    {
        if(newTab.rendered || me.renderMask)
        {
            delete me.renderMask;
            return;
        }

        // Show loadMask
        me.body.mask('Rendering...');
        me.renderMask = true;

        oldTab.hide();

        // Activate tab again after event loop
        setTimeout(() => me.setActiveTab(newTab), 0);

        // Cancel activation
        return false;
    },
    tabchange: function(me, newTab, oldTab)
    {
        // Hide loadMask
        me.body.unmask();
    }
}

---

如果你没有“看到”遮罩，那是因为浏览器没有时间重新绘制，所以忙循环使它无法将遮罩绘制到屏幕上。我正在进行网络调用，就像在发生tabchange事件后在其他选项卡中加载网格一样。你想在网格加载完成后取消遮罩吗？考虑更改标签不等待任何东西。但是如果在掩蔽后，在BeFeTeBechange事件中设置一个警报，它不会显示掩蔽，则在掩码更改事件之前没有看到掩码。它只是在Tabchange之后激活。

listeners: {
    beforetabchange: function(me, newTab, oldTab)
    {
        if(newTab.rendered || me.renderMask)
        {
            delete me.renderMask;
            return;
        }

        // Show loadMask
        me.body.mask('Rendering...');
        me.renderMask = true;

        oldTab.hide();

        // Activate tab again after event loop
        setTimeout(() => me.setActiveTab(newTab), 0);

        // Cancel activation
        return false;
    },
    tabchange: function(me, newTab, oldTab)
    {
        // Hide loadMask
        me.body.unmask();
    }
}