9

我在面板上正确设置负载掩码时遇到问题。单击按钮后，正在生成新的树存储（本地），这需要相当长的时间。加载掩码仅在（我认为）整个函数评估后显示一毫秒。在我的代码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();
    }

拆分包裹功能：-

    拆分包裹：函数（）{
    var mask = new Ext.LoadMask(Ext.getBody(), {msg:"请稍候..."});
        掩码.show();
        控制台.log(1);

        this.mgstore.getRootNode().removeAll();

        控制台.log(this.response);
        var root_node = this.mgstore.getRootNode();
        Ext.each(this.response.plans, function(plan){
            var plan_obj = {
                    id:plan.plan.id,
                    文本：plan.plan.abbreviation,
                    gsip_plan：计划，
                    gsip_type:'计划',
                    iconCls:'图标地图',
                    扩展：真，
                    叶：假
            };

            ext.each(plan.parcels, function(parcel){
                var parcel_obj = {
                        id:parcel.parcel.id,
                        文本：parcel.parcel.name，
                        叶：真，
                        gsip_plan：计划，
                        gsip_parcels：包裹，
                        gsip_type:'包裹',
                        iconCls:'图标矢量'
                };

                var planNode = root_node.appendChild(plan_obj);
                planNode.appendChild(parcel_obj);
            });
        });

        if (mask != undefined) mask.hide();
}
4

2 回答 2

14

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

于 2012-09-26T12:22:58.720 回答
1

按着这些次序：

  1. 在body标签下面创建一个Div Like

    <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. beforeload在网格存储上使用回调函数并调用您的函数loadMask，如下所示

    javascript:loadMask('myLoading',true,'Loading ...')

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

如果（4）步骤不起作用，则创建一个新函数 unloadMask 并在此函数中编写以下代码并在加载主体标签时调用此函数

function unloadMask(){ 
     Ext.util.CSS.createStyleSheet(".myloadingjs {\n visibility:hidden;  \n } ", "GoodParts");
}
于 2013-01-24T05:48:08.847 回答