Handling 404 exceptions in Sencha touch Store using ajax proxy

Question

I am trying to make my code a little more reliable by handling all kinds of exceptions that may occur. One may be a 404 exception in a Json web request. It looks like the store.load callback method is not called when the Json request receives exception 404.

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); }); } }); 

As a result, the message "Uncaught TypeError: Can not read length" from undefined "appears on line 7212 sencha-touch-debug.js. I am using version 1.1.0 for sencha touch.

Stack:

 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 server that listens for the "exception" event, but I would prefer the calling function of the called store load to be called. Am I doing something wrong or is this the default behavior?

Thanks,

Sander

Answer 1

I encounter the same Exception (Uncaught TypeError: Can not read length 'of undefined) with AjaxProxy (ST 1.1.0) if the server returns an error (404, 500, ...).

Actually, I think the problem is in the Ext.data.AjaxProxy.createRequestCallback method. I solved the problem with such dirty code:

 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 the problem on the forum with a clock touch screen.

Answer 2

I think you have another problem that has not been changed. However, try the following:

 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'); } } });