PDA

View Full Version : Ext.Ajax Events and "abort"



irata
6 Aug 2010, 12:07 AM
Hi,

I create a small "Spinner-Button" that shows a spinner gif if ajax connections are running.



HeadPanel.Spinner = Ext.extend( Ext.Button, {
handleMouseEvents: false,
iconCls: 'x-spinner',
iconOnCls: 'x-spinner-on',
iconOffCls: 'x-spinner-off',
connections: [],
initComponent: function(){
HeadPanel.Spinner.superclass.initComponent.call(this);
},
onRender: function(ct,pos){
HeadPanel.Spinner.superclass.onRender.call(this,ct,pos);
Ext.Ajax.on('beforerequest', this.show, this);
Ext.Ajax.on('requestcomplete', this.hide, this);
Ext.Ajax.on('requestexception', this.hide, this);
},
show: function(conn,opt){
this.setIconClass( this.iconOnCls );
this.connections.push(opt);
},
hide: function(conn,res,opt){
this.connections.remove(opt);
(function(){
if ( this.connections.length == 0 )
this.setIconClass( this.iconOffCls );
}).defer(500,this);
}
});
But when I "abort" an ajax request, the execption event isn't fired and so the request will remain in the "connection" array forever. How can I avoid this? Is there a way that the event is also fired when the connection will aborted?

Thanks for your help!

Regards, Tobias

smartlit
26 Aug 2010, 1:12 AM
I'm interested too. Any reply?
Is there an event when a connection is aborted?
Thanks.

irata
26 Aug 2010, 5:00 AM
Hi,

I found a solution with this "exends" to Ext.Ajax and Ext.data.Connection:


Ext.Ajax.addEvents({requestaborted:true});
Ext.override(Ext.data.Connection, {
abort : function(transId){
if(transId || this.isLoading()){
Ext.lib.Ajax.abort(transId || this.transId);
this.fireEvent('requestaborted', this, this.transId);
}
}
});
And then I add in the "onRender" function of the above spinner class this line:

Ext.Ajax.on('requestaborted', this.hide, this);


Hope this will help.

Regards Tobias

smartlit
26 Aug 2010, 5:21 AM
Thank you! I'm going to try your code!
Thanks!