Возникла проблема при применении loadmask к панели вкладок - PullRequest
Новая
       7

Возникла проблема при применении loadmask к панели вкладок

0 голосов
/ 06 сентября 2018

Я пытаюсь применить 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, но если я отлаживаюсь, я могу видеть маску.

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

После некоторых исследований я не нашел простого решения.
Поэтому я реализовал реактивирующую вкладку после рендеринга 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();
    }
}
0 голосов
/ 07 сентября 2018

Действие происходит слишком быстро, когда нет отладки, чтобы увидеть его в действии без отладки, вам нужно добавить отсрочку на 1 сек.

Рабочий Образец скрипки 

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)
        }
    }
})
...