欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ext Ajax请求队列

程序员文章站 2024-01-27 10:17:46
...
最近在做一个系统时,在删除记录时要求能清楚看到删除的进度,把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
});
  • Ext Ajax请求队列
            
    
    博客分类: ExtJS ExtAjax队列 
  • 大小: 64.4 KB
相关标签: Ext Ajax 队列