[Ext JS 4] 實戰之Load Mask，ext.loadmask

[Ext JS 4] 實戰之Load Mask，ext.loadmask
前言

關於 Extjs 的 load mask 的使用，可以參考：

[Ext JS 4] 實戰之Load Mask(載入遮罩)的顯示與隱藏

一般而言，在如下情況下可能要使用grid 的 reconfigure功能：

1. 改變grid 的顯示欄位 （增加或更換， 這和 hide , show 已經有的欄位不同）

2. 切換grid 的View 和 Edit 模式（這裡面的內容就比較多了）

這裡要討論的問題是： 在 reconfigure 的時候， grid 是否可以有 load mask 的遮罩效果。

遺憾的是：

預設狀況下， 執行 grid 的 reconfigure 是不會出現mask 的。

在欄位比較上， 資料量比較下的狀況下， 這個方法執行時間比較短， 有沒有遮罩都還好。

但是，在欄位比較多，資料量比較大而且切換到edit 的cell 比較多的時候 ， 頁面明顯有一段時間的停頓。

以20個顯示欄位，10個編輯欄位， 80 筆資料的grid 來說， 從View 模式切換到 Edit 模式， 停頓時間在 6~7 s 之間。

添加loadmask

既然reconfigure 沒有 loadmask, 是否可以自己添加一個 loadmask 呢？

在上一篇也介紹了如何添加的方式。

    var myMask = new Ext.LoadMask(myPanel, {msg:"Please wait..."});      myMask.show();  

這裡的myPanel 可以是通過Ext.getCmp 得到的Ext 組件， 也可以是 Ext.get() 得到 Ext.dom.Element.

添加的思路：

1. 在點擊edit 的時候，建立並顯示一個load mask

2. 在 grid 的reconfigure的事件中， 隱藏（或銷毀）這個load mask.

添加之後發現，  空白還是會持續比較長時間， 這個load mask 只是在最後的時候出來一下就立馬消失了。

也就是說， 這種方式基本上沒什麼用。

懷疑假說一： 是否是執行的順序有問題？ （是否reconfigure 的事件提前被觸發了）

針對這個假說， 加上一些alert 語句列印。

奇怪的問題來了， 在edit 點擊之後加上一個alert 之後， 發現一切都正常了。

懷疑假說二： 是否是zindex的問題？ (顯示的load mask 在reconfigure grid的後面)

針對這個假說, 設定建立的load mask 的show事件， 加上toFront 的方法。

發現執行reconfig 時， toFront 方法會出錯， 報

extjs 'bringToFront' of undefined

這種方法行不通。

正確的方法

看上去， load mask 的 show 和grid 的reconfigure 有執行時間的先後問題。

既然執行alert 是正常的，
看上去是執行alert 的時候， load mask 有初始好並顯示。

基於此，在load mask show 完之後，停頓 1s 再reconfigure , 代碼類似：

var loadMask = new Ext.LoadMask(gridpanel,{id:maskid,msg:'Please wait...',floating:true,autoRender:true,listeners:{show:function(){        Ext.Function.defer(function(){         //editGrid(gridpanel,moreCfgObj,false,maskid);                    // reconfigure        }, 1000)}}});loadMask.show();

這裡有發現的兩點是：

1. 等待的時間不能太長

2. defer 的方法， 直接 loadMask.show(function(){}); 這種寫法看上去不行。

ExtJS單頁面應用，如何?mask的自動隱藏，顯示？tabpanel有gridpanel選擇grid載入完觸發mask隱藏
myGrid.store.on('load',function(){
//mask隱藏
})

其store 用回呼函數：

store.load({
params: {start:0,limit:20}, //參數
callback: function(records, options, success){
//mask隱藏
}

....

});
你好，，想問你一個問題，extjs中如何使頁面載入時顯示一個Loading...提示框？ 謝謝。。//使用蒙版行了
var myMask = new Ext.LoadMask(Ext.getBody(), {//也Ext.getCmp('').getEl()視窗名稱
msg : "正操作,請稍...",//要寫成Loading...也
msgCls : 'z-index:10000;'
});
myMask.show();
myMask.hide();