ext 的loadmask 与ajax的同步请求水火不容
由于ajax 的同步请求会有一段请求时间。有的短。有的长,对于短的我们还是能接受的,不过长的话就必须处理一下了,
就比如处于ext 4.2.0的框架下,需要一个遮掩的样式,框架是有自带的,loadmask ,这个东西,不过是放在同步ajax中的话
loadmask函数处于哪个位置都会被同步ajax 放到ajax请求结束之后在 触发,而且使用同步ajax中 ,页面的话也是等ajax请求
完在渲染的,这样的情况下,ajax的请求时间这个空挡还是没有被遮掩的。这种情况的处理是,使用异步的ajax,
同步与异步的区别是同步的情况下,一切与页面交互的东西都会被放到ajax请求结束后在触发,而异步并不是,他可以一边向
后台请求数据一边处理页面的事件。这就是异步的好处,不过异步也有一些地方是让人不舒服的,就是异步请求到的数据不能
在外部使用,这也一个头疼的地方。不过这一点我还没深入的研究过,也不知道是不是与异步请求的时间有关。
重点是同步ajax请求期间不能与页面交互
ext 的loadmask的遮掩效果:
一、可以直接应用在元素上,如:
target 可以是:document.body、元素、DOM节点、id
var loadMarsk = new Ext.LoadMask(target, {
msg : '正在删除数据,请稍候。。。。。。',
removeMask : true// 完成后移除 这个没有尝试过,不知道是什么完成之后移除
});
loadMarsk .show(); //显示
loadMarsk .hide(); //隐藏
二、还可以和Ext.data.Store结合,可将效果与Store的加载达到同步,如:
var loadMarsk = new Ext.LoadMask(document.body, {
msg : '数据处理中,请稍候。。。。。。',
disabled : false,
store : store
});
三、在form的submit方法中有waitMsg属性来达到上面的效果 ,如:
form.submit({
waitMsg : '正在提交数据...'
.....
实例代码:
//添加到body
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
//添加到grid
var grid = new Ext.grid.GridPanel({
cm : myCm,
store : myStore,
loadMask : {
msg : '加载数据中,请稍候...'
}
});