How to add global loadmask to main controller for Sencha Tabpanel?

Question

My tabpanel based app is nearly finished, but I'd like to improve it by adding a global loadmask that appears on each tap of my tabpanel, and disappears after the contents of the particular tab has been rendered.

I am a little unclear though what I should be listening for, should I activate the loadmask on activeitemchange, then unmask it using a global painted event? I'm assuming the most efficient way of doing this would be in my main controller, as then I'd only have to do it once instead of having multiple listeners (like in the only examples I have found). This seems to work and I get a loadmask on clicking a tab item, but I'm not sure how to unmask on the painted event:

Ext.define('TCApp.controller.Main', {
extend: 'Ext.app.Controller',

config: {
refs: {
     tabpanel: 'tabpanel'
},
control: {
     tabpanel: {
     activeitemchange: 'onActiveItemChange'
                   }
         }
},
onActiveItemChange: function (self, newItem) {
    Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true});
    console.log('Activeitemchanged');
}
});

Is this the best way, putting the Ext.Viewport.setMasked(false); on the painted event, in the main controller? I'm not really sure how to do this.

I've also been reading this, but I don't think it helps much:

http://senchaexamples.com/2012/03/05/determining-when-the-active-item-changes-on-an-ext-tabpanel-container-in-sencha-touch-2/

My POV is you shouldn't use loadmasks just when you're waiting for simple elements to render. I only use them before I make an Ajax request and then remove them when the request has succeeded or failed. — Titouan de Bailleul
Even when it would make my app seem more professional? I would rather see a loadmask than a background image loading for 1 second on switch of my tabpanel...is there a solution? One tab loads a background image cls — Digeridoopoo
There's not Sencha event firing when a background image is fully loaded.. — Titouan de Bailleul

Jeff Wooden Jeff Wooden · Accepted Answer · 2012-08-08T17:08:42

I'm not sure that that when you change your active item on the tab panel that it will trigger the 'painted' event (you can test it). Off the top of my head (have not tested this) you have a couple of options. You can try to add the 'activate' event in your control config for the tab panel... according to the docs, this fires when an item within the container is activated.

If that doesn't work, then you can try something like this for your onActiveItemChange function:

onActiveItemChange: function (self, newItem) {
    Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true});
    console.log('Activeitemchanged');
    newItem.on('painted', this.hideMask, this);
    //might need to try newItem.element.on('painted', this.hideMask, this);
},
hideMask: function() {
    Ext.Viewport.setMasked(false);
}

How to add global loadmask to main controller for Sencha Tabpanel?

1 Answers