Handling 404 exceptions in Sencha touch Store with an ajax proxy

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