大主宰天蚕土豆_[Ext JS 4] 實(shí)戰之Load Mask - 在Grid Reconfigure的使用狀況| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS 4] 實(shí)戰之Load Mask - 在Grid Reconfigure的使用狀況

## [Ext JS 4] 實(shí)戰之Load Mask - 在Grid Reconfigure的使用狀況
### 前言
關(guān)于 Extjs 的 load mask 的使用，可以參考：
[Ext JS 4] 實(shí)戰之Load Mask(加載遮罩)的顯示與隱藏

一般而言，在如下情況下可能要使用grid 的 reconfigure功能：
1. 改變grid 的顯示欄位 （增加或更換， 這和 hide , show 已經(jīng)有的欄位不同）
2. 切換grid 的View 和 Edit 模式（這里面的內容就比較多了）

這里要討論的問(wèn)題是： 在 reconfigure 的時(shí)候， grid 是否可以有 load mask 的遮罩效果。
遺憾的是：
默認狀況下， 執行 grid 的 reconfigure 是不會(huì )出現mask 的。
在欄位比較上， 數據量比較下的狀況下， 這個(gè)方法執行時(shí)間比較短， 有沒(méi)有遮罩都還好。
但是，在欄位比較多，數據量比較大而且切換到edit 的cell 比較多的時(shí)候 ， 頁(yè)面明顯有一段時(shí)間的停頓。
以20個(gè)顯示欄位，10個(gè)編輯欄位， 80 筆數據的grid 來(lái)說(shuō)， 從View 模式切換到 Edit 模式， 停頓時(shí)間在 6~7 s 之間。

### 添加loadmask
既然reconfigure 沒(méi)有 loadmask, 是否可以自己添加一個(gè) loadmask 呢？
在上一篇也介紹了如何添加的方式。
    var myMask = new Ext.LoadMask(myPanel, {msg:"Please wait..."});  
    myMask.show();

這里的myPanel 可以是通過(guò)Ext.getCmp 得到的Ext 組件， 也可以是 Ext.get() 得到 Ext.dom.Element.
添加的思路：
1. 在點(diǎn)擊edit 的時(shí)候，創(chuàng  )建并顯示一個(gè)load mask
2. 在 grid 的reconfigure的事件中， 隱藏（或銷(xiāo)毀）這個(gè)load mask.
添加之后發(fā)現，  空白還是會(huì )持續比較長(cháng)時(shí)間， 這個(gè)load mask 只是在最后的時(shí)候出來(lái)一下就立馬消失了。
也就是說(shuō)， 這種方式基本上沒(méi)什么用。

懷疑假說(shuō)一： 是否是執行的順序有問(wèn)題？ （是否reconfigure 的事件提前被觸發(fā)了）
針對這個(gè)假說(shuō)， 加上一些alert 語(yǔ)句打印。
奇怪的問(wèn)題來(lái)了， 在edit 點(diǎn)擊之后加上一個(gè)alert 之后， 發(fā)現一切都正常了。

懷疑假說(shuō)二： 是否是zindex的問(wèn)題？ (顯示的load mask 在reconfigure grid的后面)
針對這個(gè)假說(shuō), 設定創(chuàng  )建的load mask 的show事件， 加上toFront 的方法。
發(fā)現執行reconfig 時(shí)， toFront 方法會(huì )出錯， 報
extjs 'bringToFront' of undefined

這種方法行不通。

### 正確的方法
看上去， load mask 的 show 和grid 的reconfigure 有執行時(shí)間的先后問(wèn)題。
既然執行alert 是正常的，
看上去是執行alert 的時(shí)候， load mask 有初始好并顯示。
基于此，在load mask show 完之后，停頓 1s 再reconfigure , 代碼類(lèi)似：
```javascript
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();
```

這里有發(fā)現的兩點(diǎn)是：
1. 等待的時(shí)間不能太長(cháng)
2. defer 的方法， 直接 loadMask.show(function(){}); 這種寫(xiě)法看上去不行。

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS 4] 實(shí)戰之Load Mask - 在Grid Reconfigure的使用狀況

網(wǎng)站導航