Extjs处理时间较长时加载遮罩

Question

我在面板上设置加载遮罩时遇到了问题。单击按钮后，将生成新的树存储（本地），这需要一些时间。只有在整个函数评估之后，加载遮罩才会显示一个毫秒。在我的代码中，console.log（0）和console.log（1）在整个函数处理之后显示，按钮本身会冻结几秒钟，然后解冻，之后控制台会显示0和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:"请稍候..."});
        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();
}

- patryks

---

我没有明确指定我想要实现什么。我只是想用loadMask包装splitParcels函数。该掩码在函数开头显示，然后在函数结尾隐藏。 - patryks

你在文档主体上渲染了任何面板吗？ - Wilk

不行。这个函数会改变附加到树面板的存储。 - patryks

那是个好问题！ - Wilk

Answer 1

这个原因非常简单——JS是单线程的*. 如果您修改DOM（例如打开蒙版），则实际更改会在当前执行路径完成后立即完成。因为您在某些耗时任务的开始处打开了蒙版，所以浏览器会等待直到它完成DOM更改。因为您在方法结束时关闭蒙版，所以可能根本不会显示。解决方案很简单——在一定延迟后调用store重建。

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

*如果您想要真正的多线程，请参见Web Workers

- Krzysztof

---

这正是我所想的！非常好的答案 ;) - Wilk

谢谢，我的整个部门都是JavaScript新手，有时我们会很疑惑为什么加载遮罩有时候就是不显示。 - WendyG

除了关于Web Workers的部分，你的回答很好。旧版本的IE不支持Web Workers。如果你不在意这个问题，那就尽情使用吧。 - BentOnCoding

Answer 2

跟随以下步骤：

1. 创建一个像body标签下面的div

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

2. 在头部作为脚本引入Ext Js库

3. 创建一个脚本标签并写入以下代码

   var Mask;
   function loadMask(el,flag,msg){
   Mask= new Ext.LoadMask(Ext.get(el), {msg:msg});
   if(flag)
       Mask.show();
   else
       Mask.hide();
   }
   

   }

4. 在grid store上使用回调函数beforeload并调用你的函数loadMask，如下所示

   javascript:loadMask('myLoading',true,'正在加载...')
   

5. 在body标签上调用函数onload并调用javascript:loadMask('myLoading',false,'正在加载...')

如果 (4) 步骤无法正常工作，则创建一个名为 unloadMask 的新函数，在该函数中编写下面的代码，并在 body 标签的 onload 上调用此函数。

function unloadMask(){ 
     Ext.util.CSS.createStyleSheet(".myloadingjs {\n visibility:hidden;  \n } ", "GoodParts");
}

- siddmuk2005