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 for a millisecond only after (i think) the whole function evaluates. In my code console.log(0) and console.log(1) shows after the whole function processes, the button alone freezes for couple of seconds then unfreezes and after that console shows 0 and 1. What is the proper way to handle this kind of situations. Here is the code:

Button definition:

    xtype:'button',
    text:'Rozdziel działki',
    iconCls:'icon-map_link',
    scope:this,
    handler:function(){
       console.log(0);
       this.splitParcels();
    }

Split Parcels function:-

    splitParcels:function(){
    var mask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
        mask.show();
        console.log(1);

        this.mgstore.getRootNode().removeAll();

        console.log(this.response);
        var root_node = this.mgstore.getRootNode();
        Ext.each(this.response.plans, function(plan){
            var plan_obj = {
                    id:plan.plan.id,
                    text:plan.plan.abbreviation,
                    gsip_plan:plan,
                    gsip_type:'plan',
                    iconCls:'icon-map',
                    expanded:true,
                    leaf:false
            };

            Ext.each(plan.parcels, function(parcel){
                var parcel_obj = {
                        id:parcel.parcel.id,
                        text:parcel.parcel.name,
                        leaf:true,
                        gsip_plan:plan,
                        gsip_parcels:parcel,
                        gsip_type:'parcel',
                        iconCls:'icon-vector'
                };

                var planNode = root_node.appendChild(plan_obj);
                planNode.appendChild(parcel_obj);
            });
        });

        if (mask != undefined) mask.hide();
}

Answer 1

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

Answer 2

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