PDA

View Full Version : loadmask



dascoco
6 Mar 2012, 5:16 AM
Hey,
I want to use a Loadmask while the data for a chart was generated.
However, it constructed the diagram first and then displays the Loadmask. When I use a debugger then it runs correctly

loadMask: function(){
var myMask = new Ext.LoadMask(Ext.getCmp('pointTurnEventChart'),{id:'loadMask'}, {msg:"Please wait..."});
myMask.show();
this.getSelectedObjects(); //SelectedObjects generate the chart
},

Thanks for help

tvanzoelen
6 Mar 2012, 6:04 AM
What if you do the this.getSelectedObjects(); on the onShow event of the loadMask?



loadMask: function(){
var myMask = new Ext.LoadMask(Ext.getCmp('pointTurnEventChart'),{id:'loadMask'}, {msg:"Please wait..."});

var me = this;
myMask.on('show', function(){
me.getSelectedObjects(); //SelectedObjects generate the chart
});

myMask.show();
},

dascoco
6 Mar 2012, 6:32 AM
It makes no difference

friend
6 Mar 2012, 9:27 AM
The component to be masked must be rendered prior to attempting to apply a mask to it.

Do your masking/loading in the afterrender event of the target component or any other event which transpires only after rendering is complete.

dascoco
7 Mar 2012, 3:52 AM
The component to be masked must be rendered prior to attempting to apply a mask to it.
But I would masked the chart rendering, how can I do this.

tvanzoelen
7 Mar 2012, 4:09 AM
You could try the setLoading function instead of the creating a loadmask.

friend
7 Mar 2012, 4:31 AM
If autoLoad: false is set for the chart's store, the chart will render with no data points. In the afterrender event of the chart, you can then load the store.

dascoco
7 Mar 2012, 6:22 AM
thanks for help

but none of the solutions run

The chart was rendered first.

When I deactivated the line
this.getSelectedObjects();

Then I can see the loadmask on buttom click

vietits
7 Mar 2012, 7:24 AM
Did you try to use mask() and unmask()?


loadMask: function(){
Ext.getCmp('pointTurnEventChart').getEl().mask('Please wait ...');
this.getSelectedObjects(); //SelectedObjects generate the chart
},

dascoco
7 Mar 2012, 1:06 PM
It does not change.

but now I've tested it with Opera and all runs correctly.

tvanzoelen
7 Mar 2012, 1:48 PM
I think it has something to do with animate. With showAt you can disable it.

dascoco
8 Mar 2012, 2:39 AM
When I use showAt then it doesn't rendered the chart.


showChart: function(selectedTimes){


Ext.create('Ext.data.ArrayStore',{
fields:['deltaTime','curEvt1'],
data : chartarray,
storeId: 'motorStore'+motorNr,
});

Ext.create('Ext.chart.Chart',{
theme: 'Category4',
shadow:false,
width:500,
height:330,
id: 'motorChart'+motorNr,
store: 'motorStore'+motorNr,
axes: [{
type:'Numeric',
position: 'bottom',
title:allLang.lang.common['Time'],
maximum: axistime,
decimals: 1,
fields:['deltaTime']


},{
type:'Numeric',
position:'right',
title:allLang.lang.common['Current'],
fields:['curEvt1']

}
],
series: [
{
type:'line',
displayName: 'current',
axis: 'right',
yField: 'curEvt1',
xField:'deltaTime',
title: allLang.lang.common['Current'],
showInLegend:showcurEvt1legend,
showMarkers : false
}
],

legend: {
position: 'right'


}
})showAt(false);
myMask.destroy();
var activeTab =Ext.getCmp('charttab'+motorNr)
activeTab.removeAll();
activeTab.add('motorChart'+motorNr);
chartarray = [];
The Chart data was created in the getSelectedObjects function