extjs4 - 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

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