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.

Leave a Reply

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

Your comment

Your name, please

Your email, please

POSTED

May 23, 2012

SHARE POST

LOCATED IN

(62)

TAGS

(2)
(1)
(21)

CATEGORIES

HAVE A QUESTION ABOUT OUR SERVICES?

Ready to start on a project?

WANT TO SEE OUR WORK?

Visit our case studies page or request specific project examples.