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 workers

Answer 2

请按照以下步骤操作：

在身体标记下面创建一个Div

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

将Ext Js库包含在头部作为脚本

创建脚本标记并在脚本标记

中写下以下行

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

}

在网格商店中使用回调函数beforeload并调用您的函数loadMask，如下所示
```
javascript:loadMask('myLoading',true,'Loading ...')
```
在body标签上调用函数onload并调用javascript：loadMask（'myLoading'，false，'Loading ...'）

if（4）步骤不工作然后创建一个新函数unloadMask并在此函数内写下代码并在onload of body标签上调用此函数

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

Extjs加载蒙版，长时间处理

2 个答案: