ExtJS 4: Ext.Ajax and Timeout
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