[Ext JS 4] 实战之Load Mask - 在Grid Reconfigure的使用状况| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] 实战之Load Mask - 在Grid Reconfigure的使用状况

## [Ext JS 4] 实战之Load Mask - 在Grid Reconfigure的使用状况
### 前言
关于 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 , 代码类似：
```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();
```

这里有发现的两点是：
1. 等待的时间不能太长
2. defer 的方法， 直接 loadMask.show(function(){}); 这种写法看上去不行。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] 实战之Load Mask - 在Grid Reconfigure的使用状况

网站导航