Show loading image by the time the action method gets completed in Extjs (Extended JavaScript Library)

Here is an example of showing a 'Loading Icon' , till your action gets completed. This was implemented by one of my good friend, Tohar.

Using this example you can grey out the background and show the Loading image till the action is completed.

This example uses Ext Window for this purpose.

Suppose,

<input type="button" onclick="some action here which involves some wait"/>

Onclick of this button call:-

function showWaitbox()

{

if(waitMsg!=null)

waitMsg.show();

}

And on complete of action call:-

function hideWaitbox()

{

if(waitMsg!=null){}

waitMsg.hide();

}

Here is the definition of the Ext Window:-

waitMsg = new Ext.Window({ 

id:'waitMsgId',          

resizable:false, 

closable : false, 

preventHeader :true,

frame :false,

frameHeader :false,  

shadow :false, 

modal:true,

bodyStyle: 'border:none;background:none;',

items:[{ 

xtype:'panel',

modal:false,

height:25,

width : 100,

preventHeader :true,

frame :false,

bodyStyle: 'border:none;background:none !important;',

frameHeader :false,  

html:'<div align="center"><img src="/loading.gif" style="padding-right:10px;padding-left:6px;"/>Loading...</div>' 

}] 

});