Extjs長時間加載掩碼

我在正確設置面板上的加載掩碼時遇到問題。點擊一個按鈕後，新的樹存儲正在生成（localy），這需要相當長的一段時間。加載掩碼僅在（我認爲）整個函數評估之後顯示一毫秒。在我的代碼console.log(0)和console.log(1)顯示整個功能處理後，按鈕單獨凍結幾秒鐘然後解凍，然後控制檯顯示0 and 1。處理這種情況的正確方法是什麼？下面是代碼：Extjs長時間加載掩碼

按鈕定義：



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

來源

2012-09-26 patryks

我沒有具體說明我想完成什麼。簡單地說，我想用loadMask封裝splitParcels函數。掩碼在開始時顯示並隱藏在函數的結尾處。 – patryks

你有沒有在文檔體上渲染任何面板？ – Wilk

不是。此功能將附加到樹面板的商店更改。 – patryks

其中的原因很簡單 - JS是單線程*。如果您修改DOM（例如通過打開蒙版），則在當前執行路徑完成後立即進行實際更改。因爲你在開始一個耗時的任務開始時將瀏覽器打開，所以瀏覽器等待DOM更改，直到它完成。因爲在方法結束時關閉遮罩，所以可能根本不顯示遮罩。解決方法很簡單 - 在一段延遲後調用存儲重建。

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

*如果您想擁有真正的多線程看到web workers

來源

2012-09-26 12:22:58 Krzysztof

這就是我的想法！很好的回答;） – Wilk

是的，延期工作。非常感謝！ – patryks

謝謝，我的整個部門都是JavaScript的新手，並且一直困惑爲什麼有時候加載掩碼不顯示。 – WendyG

遵循以下步驟：

低於體溫標籤創建一個div像

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

包括Ext Js lib郭寶宏的頭腳本

創建一個腳本標籤和電網商店腳本標籤

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 ...') 
```
調用函數onload在body標籤上並調用javascr IPT：loadMask（「myLoading」，虛假，「正在載入」）

如果步驟（4）不工作，然後創建一個新的功能unloadMask和下面的代碼此功能寫入內和呼籲的onload這個功能的身體標記

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

來源

2013-01-24 05:48:08 siddmuk2005

Extjs長時間加載掩碼

回答

相關問題