Ext Ajax请求队列

最近在做一个系统时,在删除记录时要求能清楚看到删除的进度,把ajax写在一个循环中,看到一个现象,在Firefox中,可以看到删除的进度,可是在IE,Chrome中不能看到进度,即删除十条记录里,直能看到最后一条的进度,编写了这个ajax请求除列组件,解决了这个情况;有什么不足的地方欢迎指出,谢谢大家。

/**
* Ajax请求队列
* @usage var queue = new Ext.util.AjaxQueue({
* scope : this,
* listeners : {
* 'beforequeue' : function(AjaxQueue){},
* 'executequeue' : function(){},
* 'afterqueue' : function(){}
* }
*
* });
* queue.add({
* url : 'XXX',
* success : function(){
*
* }
* ....
* })
* queue.run();
*/
Ext.util.AjaxQueue = function(cfg){
this.items = [];
this.nowIndex = 0;
this.ajaxCount = 0;

this.addEvents(
//队列开始执行前事件,若事件返回false,则终止执行队列
'beforequeue',
//当整个队列被执行完毕后的事件,true执行成功,false执行失败
'afterqueue',
//任意一个队列执行完后的事件
'executequeue'
);

this.listeners = cfg.listeners;

Ext.util.AjaxQueue.superclass.constructor.call(this);
};

Ext.extend(Ext.util.AjaxQueue,Ext.util.Observable,{

//添加Ajax请求到队列中
add : function(params){
this.items.push(params);
this.ajaxCount++;
},

//执行队列
run : function(){
//当触发beforequeue事件返回false时,终止队列的执行
if(this.fireEvent("beforequeue", this) === false){
return;
}
this.doExecute(this.items[this.nowIndex], this.doCallBack, this.nowIndex,this);
},

doExecute : function(jsonObj,callback,nowIndex,ajaxQueue){
var sucHandler = jsonObj.success;
var faiHandler = jsonObj.failure;
var ajaxOptions = {
success : function(response,options) {
sucHandler(response,jsonObj.params);
callback(ajaxQueue);
},
failure : function() {
faiHandler.call();
callback(ajaxQueue);
}
};
Ext.apply(jsonObj, ajaxOptions);

return Ext.Ajax.request(jsonObj);
},

doCallBack : function(ajaxQueue){
//当执行到这里后说明一个请求已被执行,这里触发执行队列里一个请求的事件
ajaxQueue.fireEvent('executequeue',jsonObj,ajaxQueue.nowIndex);
ajaxQueue.nowIndex++;
if(ajaxQueue.nowIndex >= ajaxQueue.ajaxCount) {
ajaxQueue.fireEvent("afterqueue",ajaxQueue);
ajaxQueue.callback.call(ajaxQueue.scope || ajaxQueue);
return;
}
var jsonObj = ajaxQueue.items[ajaxQueue.nowIndex];
ajaxQueue.doExecute(jsonObj,ajaxQueue.doCallBack, ajaxQueue.nowIndex,ajaxQueue);
},

callback : Ext.emptyFn
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值