Ext.LoadMask on TabPanel change

[ultraman69]

Hi !

If I want to display the load mask on tab panel between tab change, what would be the right approach ? I was thinking about creating and showing the LoadMask on item change event in the tab panel. Then remove it in the painted event in the child view. What do you think ? Is it possible or is there an easier / cleaner way to do it ?

[ultraman69]

To make things clearer, since the TabPanel is not the most performant controler in the framework, I'd like to be able to display a load mask as soon as someone click on a tab button and remove it when the child item (Panel) is ready. I tried somethings, but it doesn't really works. This code here I tried. I know events are fired with the good ol' alert. But the "masked" config is only applied when the panel is loaded so not helpful...

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