首页 > 代码库 > [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 , 代码类似:

	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(){}); 这种写法看上去不行。