PDA

View Full Version : Load Mask for Chart



kantha.exe
9 Jul 2012, 10:00 PM
Hi
I am using EXTjs4 Chart , i want to put Load Mask for Chart while Loading.... I tried this following code....


beforerender: function() { var myMask = new Ext.LoadMask(chartForReport.getEl(), {msg: 'Please wait...'}); myMask.show(); }, afterrender: function() {
var myMask = new Ext.LoadMask(chartForReport.getEl(), {msg: 'Please wait...'}); myMask.show(); myMask.destroy(); }

but its not working......
any way ....?:-?

sword-it
10 Jul 2012, 4:49 AM
Hi,

You can try following code:-




xt.onReady(function () {
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: ['temperature', 'date']
});
var store = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
{ temperature: 58, date: new Date(2011, 1, 1, 8) },
{ temperature: 63, date: new Date(2011, 1, 1, 9) },
{ temperature: 73, date: new Date(2011, 1, 1, 10) },
{ temperature: 78, date: new Date(2011, 1, 1, 11) },
{ temperature: 81, date: new Date(2011, 1, 1, 12) }
]
});
chart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
store: store,
axes: [
{
title: 'Temperature',
type: 'Numeric',
position: 'left',
fields: ['temperature'],
minimum: 0,
maximum: 100
},
{
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'ga'
}
],
series: [
{
type: 'line',
xField: 'date',
yField: 'temperature'
}
],
listeners: {
afterrender: {
fn: doMask
}
}
});
function doMask(chart) {
var myMask = new Ext.LoadMask(chart, { msg: 'Please wait...' });
myMask.show();
setTimeout(function () {
myMask.hide();
}, 2000)
}
})