Access to http status code from Ext.data.Store

Question

I have an http API which (shockingly new technique) reacts on different errors setting different response statuses.

The question is - while using Ext.data.Store with some XMLHttpRequest-inside proxy, what is the best way to handle this statuses? As far as I can understand, "load" event does not pass status directly, as well as "exception", and the last one actually doesn't even trigger when 4** status is received.

So, as I can see from code xhr instance is hidden from Ext.data.store, so the question is also can be stated as "What is best extjs practice to handle low-level xhr object".

Answer 1

There is no exception event on Ext.data.Store. Instead, it is Ext.data.proxy.Server and its sub-classes (like Ext.data.proxy.Ajax) that define an exception event . Listeners receive a response object which includes the http status.

Depending on your setup, you can register a listener on the store's proxy, or - if your store uses a model - on the model's proxy.

This test setup worked for me on Chrome 14 and FF 6:

var store = Ext.create('Ext.data.Store', {
    fields: [ 'field1', 'field2'],

    proxy: {
        type: 'ajax',
        url: 'api/data.json',
        reader: {
            type: 'json',
            root: 'data'
        },
        listeners: {
            exception: function(proxy, exception, operation) {
                console.log(response.status);
            }

        }
    },
});
store.load(); 

Answer 2

The exception event does provide a response object which has a status property containing the HTML status code you want to see.

If your exception is indeed not fired by 4** errors (which in my experience do fire) you could try to register an ajax listener instead:

Ext.Ajax.on('requestexception', exceptionHandlerMethod);

and

function exceptionHandlerMethod(connection, response, requestOptions, listenerOptions) {
    if(response.status == 401) {
        alert('401 error');
    }
}

Answer 3

Using extjs 5.1

The store/proxy can access every response http code & header by listening to 'beginprocessresponse' or 'endprocessresponse' events.

proxy: {
    // snip

    listeners: {
        beginprocessresponse: 'onResponse'
    }

    onResponse: function(store, response, operation) {
         console.log('prior to reader');
         console.log(response.getAllResponseHeaders());
    }
}

I am curious how EventDomain plays into the mix between Ext.Ajax, Proxy, Reader, and Store.