ExtJS问题（1）- Ajax中LoadMask未显示的问题

首先，介绍下问题，

缘由：我用Ext.Ajax来获取数据，由于后台数据较多，所以在Ajax前调用了下LoadMask来显示等待遮罩，待获取数据后取消遮罩。

现象：遮罩未显示，我在chrome中断点代码，断点到显示遮罩后、调用Ajax前的时候遮罩显示。

代码：（Ext版本4.2）

varmyMask=newExt.LoadMask(Ext.getBody(),{msg:"Pleasewait..."});
myMask.show();
Ext.Ajax.request({
url:'ctrl/...',params:params,async:false,success:function(res){
myMask.hide();
……
}
});

然后，根据现象分析问题，做推断和尝试

发现遮罩不能显示后首先想到的是代码问题，于是打断点查看各参数是否正常，但是断点打到myask.show()时，发现遮罩已经显示，取消断点，再跑，遮罩还是不显示。

然后注释掉了success中myMask.hide()方法，再观察发现，遮罩在加载完数据的时候显示出来了（由于这个接口时间比较长，达15s左右）。

现在可以得出一点，遮罩未显示并不是真的没有显示，而是遮罩显示的太晚（在Ajax加载完成之后），刚显示出来就被关闭了。

然后我尝试着把async设置为了true，就是默认的异步模式，发现完全正常了，遮罩可以在触发时立马显示，然后Ajax获取数据后正常关闭。

最后，思考问题的原因

由于一不小心尝试处理解决方法，于是跳过寻找解决方法这步，直接开始思考问题的原因。

首先问题肯定跟同步异步有关，js的ajax本就是异步的，在异步下遮罩的显示也正常，而在同步的情况下，遮罩的显示就推迟到了Ajax获取数据之后了。

于是推断Ext的Ajax同步时，页面上DOM结构有改动的话会在Ajax之后执行，带着这种想法，我在Ajax之前用container add了一个按钮：

container.add(btn)

发现此按钮在同步的情况下也会在Ajax返回后再显示出来。

根据以上的现象，我推断Ext的Ajax在调用同步调用的时候，会暂停DOM修改，然后再在Ajax调用完成后一起显示。

有了解更多详情的朋友还请不吝赐教。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!