To achieve this, you have the option to create an override or develop your own ajax class by extending from Ext.ajax in the context of MVC. This will allow you to incorporate effective error handling and logging.
For ExtJS 4:
Ext.define('Ext.overrides.Ajax', {
override : 'Ext.data.Connection',
listeners : {
requestexception : function(response) {
var error = response.status + ' - ' + response.statusText;
if (response.status == 202) {
Ext.Msg.show({
title : 'REST Warning message',
msg : 'Ajax Request Exception! ' + error,
cls : 'msg-wrap',
buttons : Ext.Msg.OK,
icon : Ext.Msg.WARNING
});
}
if (response.status > 400) {
var errorData = Ext.JSON.decode(response.responseText);
Ext.Msg.show({
title : 'REST Error message',
msg : 'Ajax Request Exception! ' + errorData,
cls : 'msg-wrap',
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
}
}
});
For ExtJS 5:
Ext.define('Ext.override.AjaxOverride', {
override: 'Ext.Ajax'
// additional overridden properties...
}, function() {
var me = this;
me.setExtraParams({
foo: "bar"
});
me.setUrl('MyUrl');
me.setTimeout(600000);
me.on({
scope: me,
requestexception : function(response) {
var error = response.status + ' - ' + response.statusText;
if (response.status == 202) {
Ext.Msg.show({
title : 'REST Warning message',
msg : 'Ajax Request Exception! ' + error,
cls : 'msg-wrap',
buttons : Ext.Msg.OK,
icon : Ext.Msg.WARNING
});
}
if (response.status > 400) {
var errorData = Ext.JSON.decode(response.responseText);
Ext.Msg.show({
title : 'REST Error message',
msg : 'Ajax Request Exception! ' + errorData,
cls : 'msg-wrap',
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
}
});
});
Alternatively, it's recommended to extend from Ext.ajax like so:
Ext.define('APP.ux.Ajax', {
extend: 'Ext.data.Connection',
requires: [
'APP.ux.Msg'
],
singleton : true,
autoAbort : false,
request: function(config) {
var cfg = config;
Ext.apply(cfg, {
success: function(form, action) {
APP.ux.Msg.alert('Success', action.result.msg);
//TODO: Add more logic here
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
APP.ux.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
APP.ux.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
APP.ux.Msg.alert('Failure', action.result.msg);
break;
}
}
});
this.callParent(cfg);
}
});