PDA

View Full Version : Applying loading mask to xtemplate



mondomon
10 Mar 2009, 11:08 AM
I have an XTemplate that is being used to overwrite a panel. I'm trying to add a loading mask to the panel so that when the panel is being overwritten the loading mask appears until the process is complete.


<code>
Ext.Ajax.request({
success:function(r){
var resp = Ext.decode(r.responseText);
SPD.NOCTpl.overwrite('ratepanel',resp);
}
})
</code>Thanks In Advance

jsakalos
10 Mar 2009, 11:21 AM
Mask the panel before you send the request and unmask it from the success/failure functions.

mondomon
10 Mar 2009, 11:32 AM
Perfect thanks.

And for future reference to those that may need it.


Ext.getCmp('ratepanel').getEl().mask('Loading...', 'x-mask-loading');
Ext.Ajax.request({
callback: function (options, success, response){
Ext.getCmp('ratepanel').getEl().mask().hide();
},
success:function(r){
var resp = Ext.decode(r.responseText);
SPD.NOCTpl.overwrite('ratepanel',resp);
}

jsakalos
10 Mar 2009, 11:42 AM
Hmmm, it should be much simpler - take a look at grid's code. Should be as easy as:


var panel = Ext.getCmp('ratepanel');
panel.loadMask = new Ext.LoadMask(....);
panel.loadMask.show();
Ext.Ajax.request({
callback:function(...) {
panel.loadMask.hide();
}
});