EXTJS 4 - Global exception listener

Question

I have a situation where I am making ajax requests to a server from various Ext gridpanel etc. In an Admin area.

The logged in user will be logged out if there is no activity for eg. 5 minutes which is normal.

In this case the server sends back a redirect 403 to the login page.

Right now I am inserting a:

listeners: {
    exception: function(proxy, response, operation, eOpts) {
        if (response.status == '403')
            window.location = 'login';
    }
}

To every store's proxy which is a little overkill.

Could someone be kind enough and let me know how I could add a listener to all communications between ExtJS and server?

I am using the MVC Application Architecture so it could probably be a one liner in the controller.js or app.js.

Thanks

score 28 · Accepted Answer · answered Nov 05 '11 at 21:33

28

In the beginning of your app insert the following snippet. With this EVERY response, whether it's from a store or a form or ..., will be checked and redirect to login page.

Ext.Ajax.on('requestexception', function (conn, response, options) {
    if (response.status === 403) {
        window.location = 'login';
    }
});

answered Nov 05 '11 at 21:33

Sascha

296
3
2

1

funny, we both were answering this question at the same time and both have given the same answer. So it must be correct. – nightwatch Nov 05 '11 at 21:39
Bull's Eye! Thank you very much – Shiplu Mokaddim Jul 29 '12 at 23:01

score 7 · Answer 2 · answered Nov 05 '11 at 21:36

I'm not really sure if this will catch all ajax requests but assuming you're using AjaxProxy for all communication with the server it should work: handle the 'requestexception' event in the Ext.Ajax singleton something like this

Ext.Ajax.on('requestexception', function(conn, response, options, eOpts) {
    //your error handling here
});

I haven't tried it but if you do, could you post an update here?

Carlos Jaime C. De Leon · Answer 3 · 2014-11-28T03:18:19.790

6

A more complete solution, wherein it will be a catch-all is this:

Ext.util.Observable.observe(Ext.data.Connection, {
    requestexception: function(conn, response, options) {
        if(response.status == '403')
            window.location = 'login';
    }
});

This is because the underlying class, Ext.data.Connection is used not only in Ext.Ajax but as well as the Ext.data.Proxy that is used by Ext.data.Store, Ext.data.Model. This handles exceptions on such calls as store.load() and model.save(). This should be a more complete catch-all handler.

See more details in my blog post.

edited Nov 28 '14 at 03:18

answered Nov 26 '14 at 02:58

Carlos Jaime C. De Leon

2,476
2
37
53

Ext.util.Observable.observe is not a function in Ext JS 5.x. You have to use Ext.Ajax.on – jprism Feb 22 '15 at 02:20
No you don't, and yes in Ext JS 5.0.1 `typeof Ext.util.Observable.observe` will outputs `"function"` – EricLavault Oct 12 '15 at 14:42

EXTJS 4 - Global exception listener

3 Answers3