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

The reason for that is quite simple - JS is single threaded*. If you modify DOM (for example by turning mask on) the actual change is made immediately after current execution path is finished. Because you turn mask on in begining of some time-consuming task, browser waits with DOM changes until it finshes. Because you turn mask off at the end of method, it might not show at all. Solution is simple - invoke store rebuild after some delay.

Working sample: http://jsfiddle.net/25z3B/2/

*If you want to have true multi threading see web workers

Answer 2

Follow these steps:

1. Create a Div Like below body tag

   <div id="myLoading" class="myloadingjs" style="float: center; overflow: auto; margin-top:290px"><div>
   

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");
}