CODEWITHSUNDEEP
extjsextjs6
guru123
guru123

Reputation: 1

Facing issue while applying loadmask to tab panel

I am trying to apply ext.getBody.loadmask() on tab panel change event as follows:

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

But mask is getting activated without debugging after tabchange event but if I debug, I am able to see the mask.

Upvotes: 0

Views: 239

Answers (2)

Moataz Sanad
Moataz Sanad

Reputation: 284

The action is happening too fast when there is no debug, to see it in action without a debug you need to add a defer of 1 sec.

A working 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)
        }
    }
})

Upvotes: 0

stanx
stanx

Reputation: 1

After some research I did't find simple solution.
So I implemented reactivating tab after loadMask will be rendered.

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();
    }
}

Upvotes: 0

Related Questions