Handling 404 exceptions in Sencha touch Store with an ajax proxy - exception

Question

I'm trying to make my code a little more robust, by handling all sorts of exceptions that may occur. One may be a 404 exception on a Json web request. It looks like the callback method of store.load isn't called when the Json request gets a 404 exception.
The code:
Ext.regModel('Activiteit', {
fields: [
{ name: 'id', type: 'int' },
{ name: 'ServerId', type: 'int', mapping: 'Id' },
{ name: 'Title', type: 'string' },
{ name: 'Description', type: 'string' },
],
});
Ext.regApplication({
name: 'App',
launch: function () {
console.log('launch');
var ajaxActiviteitStore = new Ext.data.Store({
model: "Activiteit",
storeId: 'ajaxActiviteitStore',
proxy: {
type: 'ajax',
url: '/senchatest/Activiteit/Gett/',
reader: {
type: 'json',
root: 'activiteiten'
}
}
});
ajaxActiviteitStore.load(function (records, operation, success) {
//the operation object contains all of the details of the load operation
console.log(success);
});
}
});
This results in a "Uncaught TypeError: Cannot read property 'length' of undefined" exception on line 7212 of sencha-touch-debug.js. I'm using version 1.1.0 of sencha touch.
The stacktrace:
Uncaught TypeError: Cannot read property 'length' of undefined
Ext.data.Store.Ext.extend.loadRecords sencha-touch-debug.js:7212
Ext.data.Store.Ext.extend.onProxyLoad sencha-touch-debug.js:7024
(anonymous function) sencha-touch-debug.js:8742
Ext.data.Connection.Ext.extend.onComplete sencha-touch-debug.js:17566
Ext.data.Connection.Ext.extend.onStateChange sencha-touch-debug.js:17513
(anonymous function) sencha-touch-debug.js:3421
What am I doing wrong here?
I found a workaround by adding a listener to the proxy that listens to the 'exception' event, but I'd rather like the callback function of the store load to be called. Am I doing something wrong, or is this default behaviour?
Thanks,
Sander

Answer 1

I encounter the same Exception (Uncaught TypeError: Cannot read property 'length' of undefined) with an AjaxProxy (ST 1.1.0) if the server return an error (404, 500, ...).
Actually, I think the problem is in the Ext.data.AjaxProxy.createRequestCallback method.
I solved my problem with a dirty code like this:
var ajaxActiviteitStore = new Ext.data.Store({
model: "Activiteit",
storeId: 'ajaxActiviteitStore',
proxy: {
type: 'ajax',
url: 'some nonexistent url',
reader: {
type: 'json',
root: 'activiteiten'
},
listeners: {
exception: function(store, response, op) {
console.log('Exception !');
// hack to avoid js exception :
// TypeError: 'undefined' is not an object (evaluating 'records.length')
// on line sencha-touch-debug-1-1-0.js:7212
op.records = [];
}
}
}
});
Hope this can help, and I will look to open an issue on sencha-touch forum.

Answer 2

I think you have another problem that unexisted url. Nevertheless, try this:
var storeException = 0;
this.ajaxActiviteitStore = new Ext.data.Store({
model: "Activiteit",
storeId: 'ajaxActiviteitStore',
proxy: {
type: 'ajax',
url: 'some nonexistent url',
reader: {
type: 'json',
root: 'activiteiten'
},
listeners: {
exception: {
fn: function(proxy, response, operation ) {
// you can parse `response.responseText` to make some decisions
storeException = 404;
}
}
}
}
});
this.ajaxActiviteitStore.load({
scope: this,
callback: function (records, operation, success) {
if (storeException==0) {
// do something
} else {
alert('Service unaviable');
}
}
});