Sencha Touch 2 - Ext.LoadMask on TabPanel item change

Question

If I want to display the load mask on tab panel between tab change in Sencha Touch 2. What would be the right approach ?

I want to show a loading mask when a tab button get pressed, and hide it as soon as the panel is displayed correctly.

Ext.define("MyProject.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar','Ext.MessageBox'
    ],
    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',
        layout: {
            type: 'card',
            animation: 'fade' //false, fade, flip, pop, scroll, slide
        },

        items: [
            {
                xtype: 'panel1',

                masked: {
                    xtype:'loadmask',                        
                    message:'Chargement...'
                },

                listeners: {
                    painted: function(container, value, oldValue, eOpts) {
                        //Ext.Msg.alert('Test', 'painted');
                        this.setMasked(false);
                    }
                }
            },
                {
                xtype: 'panel2',

                masked: {
                    xtype:'loadmask',                        
                    message:'Chargement...'
                },

                listeners: {
                    painted: function(container, value, oldValue, eOpts) {
                        //Ext.Msg.alert('Test', 'painted');
                        this.setMasked(false);
                    }
                }
            },

Problem is that the event is trapped, but since I show the mask on the child item creation, the mask isn't showing. I'd need an event like onActiveItemChanged but fired BEFORE and not AFTER. Anyone has an idea on how could I implement that ?

UPDATE : I almost made it with addition of code found on Sencha Touch forum. Added at main view (tab panel) level :

listeners: {
            delegate : 'tabbar > tab',
            tap : function() {
                Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true});
            }
        }

And then, on each item I add in the tab pannel :

xtype: 'panel1',

                listeners: {
                    painted: function(container, value, oldValue, eOpts) {
                        Ext.Viewport.setMask('false');
                    }
                }

But the problem now is that since I override the default "tap" event listener, it always stays on the same tab and never display the others even if we click on a button. Yet, the new tab's painted event gets fired.

Answer 1

I'm not sure you can achieve result like that or not because normally I just use Ext.LoadMask when applying an Ajax or Json request on tap event.

But in your case the tabpanel contents of each panel are already loaded so I feel a bit redundant task when you make use of masking here. However, you can make a fake mask loading for example one second when your activeitemchange event fired like this:

listeners: {
activeitemchange:function(){
    function setMask() {
        Ext.Viewport.mask({ xtype: 'loadmask', message: 'Chargement...' });
    }

    function unMask() {
        Ext.Viewport.unmask();
    }

    function start() {
        setMask();
        setTimeout(unMask, 1000); // execute the mask in 1 second
    }

    start();
}}; 

By the way, this activeitemchange event need to be placed after you defined all the items of the tabpanel. Hope it helps :)