Extjs加载面罩，同时长时间处理 [英] Extjs Load Mask while long processing

问题描述

正确设置面板上的加载蒙版有问题。点击一个按钮后，正在生成新的树存储区（localy），它需要相当长的一段时间。加载掩码仅在（我认为）整个函数求值后才显示一毫秒。在我的代码 console.log（0）和 console.log（1）显示整个函数进程后，单独的按钮冻结几秒钟，然后解冻，然后控制台显示 0和1 。处理这种情况的正确方法是什么？以下是代码：

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:

按钮定义：

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

推荐答案

原因很简单 - JS是单线程* 。如果您修改DOM（例如通过打开掩码），在当前执行路径完成后立即进行实际更改。因为在开始耗费时间的任务之后，打开面具，浏览器会等待DOM更改，直到完成。因为在方法结束时关闭面具，所以可能根本不显示。解决方案很简单 - 在一段时间后调用商店重建。

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.

工作示例： http： //jsfiddle.net/25z3B/2/

*如果你想要真正的多线程，请参阅网站工作人员

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

这篇关于Extjs加载面罩，同时长时间处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！