Loading message while loading grid

[dhanek]

Hi,

I read many threads regarding this solution, but i am looking for simple solution.
And also i am using 'loadMask' in grid defintion but i never seen any message while loading grid.

title: 'Tab 1',
ds: this.ds,
cm: this.cm,
printButton: false,
loadMask: {msg: 'Loading...'},
deleteButton: false

Thank you

[jgarcia@tdg-i.com]

I get a loading message when i load my grids. Do you have any special CSS enabled?

[hendricd]

Setting a loadMask (true||{}) on the grid hooks the onBeforeLoad Event of the attached datastore to the loadMask. But, the datastore is so process intensive that the required DOM update for the mask are not really made visible until after the grid.[re]load method completes. Kinda silly huh?

This is the way I handle it to smooth things out a bit:

// JS
Ext.applyIf(Ext.LoadMask.prototype,{

visible:false,
onBeforeLoad : function(){
if(!this.disabled && !this.visible){
this.el.mask(this.msg, this.msgCls);
this.visible = true;
}
},
onLoad : function(){
this.el.unmask(this.removeMask);
this.visible = false;
},
show:function(msg, append){
if(!this.disabled){
if(msg){
this.msg= append?this.msg + '<br/>'+ msg:msg;
}
this.onBeforeLoad();
}
},
hide:function(){ this.onLoad(); }

});

// First, Some Eye Candy:
var startMask = new Ext.LoadMask(document.body,{msg:'Setting Up...',msgCls:'ext-el-mask-msg x-mask-loading',removeMask:false});
startMask.show('Your Grid first...',true);

var grid = new Ext.grid.Grid('your-grid', {
title: 'Tab 1',
ds: this.ds,
cm: this.cm,
printButton: false,
loadMask: {msg: 'Loading...'},
deleteButton: false
});
grid.render(); //this is what hooks the loadMask to datastore
startMask.hide();

grid.loadMask.show();
this.ds.load.defer(100,this.ds,[{....}); //Give the poor DOM a chance to show your loadMask (catch up !)
//then, the datastore.onload event will clean it up for you.

[dhanek]

Thank you for your response, but there are no special CSS.

Anyway i got the solution with "beforeload" for datastore.

Thank you for your support.