Question

我正尝试在标签面板更改事件上应用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事件发生后无需调试即可启用掩码，但是如果进行调试，则可以看到掩码。

Answer 1

在没有调试的情况下，动作执行得太快了，要在没有调试的情况下看到动作，您需要增加1秒钟的延迟时间。

有效的Fiddle Sample

Ext.create('Ext.tab.Panel', {
    title: 'Tab Panel',
    width: 700,
    renderTo: Ext.getBody(),
    items: [{
        title: 'tab1',
        html: 'tab1 content'
    }, {
        title: 'tab2',
        html: 'tab2 content'
    }],
    listeners: {
        beforetabchange: function (tabPanel, newCard, oldCard) {
            Ext.suspendLayouts();
            Ext.getBody().mask("please wait..");
        },
        tabchange: function (tabPanel, newCard, oldCard) {
            Ext.defer(function () {
                Ext.resumeLayouts(true);
                Ext.getBody().unmask();
            }, 1000)
        }
    }
})

Answer 2

经过研究，我没有找到简单的解决方案。
所以我在渲染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();
    }
}

在将选项卡应用到选项卡面板时遇到问题

2 个答案: