ExtJS 4: Ext.Ajax and Timeout

by

I was introduced to ExtJS a few months ago because I worked on a project that was heavily using the ExtJS 4 framework. Like many other frameworks, ExtJS had some really cool features, but also a few headaches. One headache I ran into was using the Ext.Ajax class to make a simple Ajax request. The Ext.Ajax class provides your basic event handling functionality for a successful/failed request. This class provides a timeout property that will execute an abort request when a certain amount of time has passed. However, I found that when a timeout does execute, a javascript error occurs. In Firebug, the error states:

Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILBLE)[nslXMLHttpRequest.status]

And it appears ExtJS chokes at this statement in the Ext.Ajax class:

result = me.parseStatus(request.xhr.status)

Based off this error, ExtJS assumed that every request has a defined request.xhr. Unfortunately, in the timeout case, xhr is not defined.

So, to get around this issue, I created my own custom ExtJS class that extends off of the parent class of Ext.Ajax, which is Ext.data.Connection. I had to override the “onComplete” method. The updated method included checking the xhr existence and that if a timeout occurs, then execute a “failure” event.

Ext.define('Grio.Ajax', {

extend: 'Ext.data.Connection',
singleton: true,
onComplete : function(request) {

var me = this;
var options = request.options;
var result = (!request.timedout && request.xhr.status)

? me.parseStatus(request.xhr.status) : null;

var success = (!request.timedout) ? result.success : null;
var response;
if (success) {

response = me.createResponse(request);
me.fireEvent('requestcomplete', me, response, options);
Ext.callback(options.success, options.scope, [response, options]);

} else {

if (!result || result.isException || request.aborted || request.timedout) {

response = me.createException(request);

} else {

response = me.createResponse(request);

}

me.fireEvent('requestexception', me, response, options);
Ext.callback(options.failure, options.scope, [response, options]);

}

Ext.callback(options.callback, options.scope, [options, success, response]);
delete me.requests[request.id];
return response;

}

});

Hopefully, as I write this, Sencha has addressed this problem.

1 Comment

  1. Allan Mike Jandayan on said:

    Hi,

    I’m interested on how did you implement this one. Please teach me.

Leave a Reply

Your email address will not be published. Required fields are marked