Extjs加载蒙版,长时间处理

Question

我在面板上正确设置负载模板时遇到问题.单击按钮后,将生成新的树存储(localy),这需要相当长的时间.加载掩码仅在(我认为)整个函数评估之后显示一毫秒.在整个函数处理后的代码console.log(0)和console.log(1)显示中,按钮单独冻结几秒钟然后解冻并在控制台显示之后0 and 1.处理这种情况的正确方法是什么？这是代码:

按钮定义:

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

拆分包裹功能: -

    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

原因很简单 - JS是单线程*.如果修改DOM(例如通过打开掩码),则在当前执行路径完成后立即进行实际更改.因为你在开始一些耗时的任务时打开掩码,浏览器会等待DOM更改,直到它完成为止.因为您在方法结束时关闭了遮罩,所以它可能根本不显示.解决方案很简单 - 在延迟一段时间后调用存储重建.

工作样本:http://jsfiddle.net/25z3B/2/

*如果您想要真正的多线程,请参阅Web工作者