首页 > 代码库 > [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 模式(这里面的内容就比较多了)
遗憾的是:
默认状况下, 执行 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(){}); 这种写法看上去不行。