PDA

View Full Version : Is it possible to show "rotate-icon" when I click on a tab of a tabpanel?



dani_bs
12 Aug 2011, 5:30 AM
I try with:



xtype: 'tabpanel',
activeTab: 0,
items: [{
xtype: 'panel',
title: 't1',
...
}, {
xtype: 'panel',
title: 't2',
...
},
listeners: {
beforetabchange: function(panel, newCard, oldCard, options) {
panel.setLoading(true);
},
tabchange: function(panel, newCard, oldCard, options) {
panel.setLoading(false);
}
}


but sometime "rotate-icon" (waiting or busy) appear, sometime not; "not" specially if tab tale long time to appear.

tobiu
12 Aug 2011, 6:42 AM
try



newCard.setLoading(true);


since you probably want to mask the next tab instead of the tabpanel itself (normaly switching to the tab is faster than rendering its content (or refreshing the store which should automatically mask the panel).


best regards
tobiu

dani_bs
12 Aug 2011, 9:08 AM
Thanks for suggestion, but it didn't works... :(
Same behavior

apart
15 Aug 2011, 9:30 AM
Hi, I have a similar problem, which I can't figure out. I add beforetabchange and tabchange handlers to mask and unmask the tabPanel, but it seems that the mask() happens already after the layout of the newly selected tab - therefore the mask immediately gets hidden with the unmask that happens in the tabchange.
Same thing if I try to show a message box in the handler - it gets shown after the tabs change and the new tab's layout is done. Any ideas on how to make this work the right way - show the mask before layout and hide it after the layout ?



listeners: {
'tabchange' : function (tabPanel) { tabPanel.getEl().unmask();
},
'beforetabchange' : function (tabPanel) {
tabPanel.ownerCt.getEl().mask();
// or anything else i.e. Ext.msg.Alert('test') ;
}
},


Thanks