Extjs Load Mask while long processing

Question

I have problems setting load mask on panel properly. After click on a button the new tree store is being generated (localy) and it takes quite some time. The load mask shows

Answer 1

Follow these steps:

1. Create a Div Like below body tag

2. Include Ext Js library on head as script

3. create a script tag and write down below lines within script tag

   var Mask;
   function loadMask(el,flag,msg){
   Mask= new Ext.LoadMask(Ext.get(el), {msg:msg});
   if(flag)
       Mask.show();
   else
       Mask.hide();
   

   }

4. use callback function beforeload on grid store and call your function loadMask as below

   javascript:loadMask('myLoading',true,'Loading ...')
   

5. call function onload on body tag and call javascript:loadMask('myLoading',false,'Loading ...')

if (4) step not working then create a new function unloadMask and within this function write below code and call this function on onload of body tag

function unloadMask(){ 
     Ext.util.CSS.createStyleSheet(".myloadingjs {\n visibility:hidden;  \n } ", "GoodParts");
}