PDA

View Full Version : Show loading indicator while switching the tabs



rematnarab
5 Jun 2012, 6:58 AM
Hello,
I have a tabpanel which has 4 tabs, each of which contains a graph.
I need to put a loading indicator starting by the user clicking the next tab and ending after the chart is completely drawn (After the animation is finished ).
I couldnt find the appropriate events so i am using the code below but it is a trick actually it has nothing to do with the loading sequence. Thanks.


var graphPanel = Ext.createWidget('tabpanel', {
renderTo : 'divGraphPanel',
activeTab : 0,
height : 900,
width : 1100,
plain : true,
listeners:{
beforetabchange:function(){
Ext.getBody().mask("Loading");
},
tabchange:{
delay:1500,
fn : function(){
delay:1500,
Ext.getBody().unmask();
}
}
},
items : [ resultsPanel, stackedBarChart, areaChart, stackedPieChart, groupedLineChart ]
});

slemmon
5 Jun 2012, 9:20 AM
Would the chart's refresh event help?
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.Chart-event-refresh

O (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.Chart-event-refresh)r the chart's store's load/datachanged events?
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-event-load
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-event-datachanged

rematnarab
6 Jun 2012, 3:57 AM
Unfortunately none of them worked for me.
Afterrender did not work either.:s