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 : '加载数据中,请稍候...'  

         }  

    });  

posted @ 2018-01-04 14:20  有钱花  Views(849)  Comments(0Edit  收藏  举报