ExtJS问题(1)- Ajax中LoadMask未显示的问题

前端之家收集整理的这篇文章主要介绍了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调用完成后一起显示


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

原文链接:https://www.f2er.com/ajax/164336.html

猜你在找的Ajax相关文章