1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    15
    Vote Rating
    0
    kef4e is on a distinguished road

      0  

    Question Global exception handling for data requests

    Global exception handling for data requests


    Hi,

    I am migrating an application form 3.4 to 4.x. The application is using the MVC architecture of ExtJS 4.

    In 3.3x there was the option to register 'global' exception handling by adding a listener to the DataProxy:


    PHP Code:
    ////
    // all exception events
    //
    Ext.data.DataProxy.addListener('exception', function(proxytypeactionoptionsres) {
        if (
    type === 'remote') {
            
    Ext.Msg.show({
                
    title'REMOTE EXCEPTION',
                
    msgres.message,
                
    iconExt.MessageBox.ERROR,
                
    buttonsExt.Msg.OK
            
    });
        }
    }); 



    This is taken from one of the examples: http://localhost/ext-3.4.0/examples/writer/writer.html
    However, in 4.x the example is modified and the listener is directly appended to the proxy:

    PHP Code:
    listeners: {
                    
    exception: function(proxyresponseoperation){
                        
    Ext.MessageBox.show({
                            
    title'REMOTE EXCEPTION',
                            
    msgoperation.getError(),
                            
    iconExt.MessageBox.ERROR,
                            
    buttonsExt.Msg.OK
                        
    });
                    }
                } 


    Once the application is loaded i checked the DOM and it seems that the option to append
    a listener to one of the proxy types (Server types preferably ) is not yet finished ( even though it is listed in the documentation) or at least that's what I understood from what i get. May be it won't be supported at all..

    There is the possibility to extend the data.Store class, add exception handling to that class and use it as
    a 'base' for creating Stores in the application, but I am looking for a more general solution to the problem.

    So the question is (are) :

    Is it possible, to declare again global exception handling for data requests just like
    in 3.x?

    If not, is this just temporary?

    If you have any other suggestions, please help

  2. #2
    Sencha User bclinton's Avatar
    Join Date
    Nov 2007
    Posts
    286
    Vote Rating
    11
    bclinton will become famous soon enough bclinton will become famous soon enough

      2  

    Default


    I'm extending Ajax proxy. Maybe something like this will work for you?

    Code:
    Ext.define('APP.data.proxy', {
        extend: 'Ext.data.proxy.Ajax',
        alias: 'proxy.myproxy',
        
        listeners:
        {
            exception: function (proxy, request, operation)
            {
                if (request.responseText != undefined)
                {
                    // responseText was returned, decode it
                    responseObj = Ext.decode(request.responseText,true);
                    if (responseObj != null && responseObj.msg != undefined)
                    {
                        // message was returned
                        Ext.Msg.alert('Error',responseObj.msg);
                    }
                    else
                    {
                        // responseText was decoded, but no message sent
                        Ext.Msg.alert('Error','Unknown error: The server did not send any information about the error.');
                    }
                }
                else
                {
                    // no responseText sent
                    Ext.Msg.alert('Error','Unknown error: Unable to understand the response from the server');
                }
            }
        }
    });
    Once you give it the alias you can refer to it as an xtype in your model:
    Code:
        proxy:
        {
            type    : 'myproxy'
    	}

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    15
    Vote Rating
    0
    kef4e is on a distinguished road

      0  

    Default


    Thanks for the reply!

    Good suggestion, I will definitely use it.

  4. #4
    Sencha User
    Join Date
    Sep 2010
    Posts
    3
    Vote Rating
    0
    scollins is on a distinguished road

      0  

    Smile How to add an event listener to Ext.data.proxy.Server

    How to add an event listener to Ext.data.proxy.Server


    We have just worked out one way this can be done globally using Ext.override.

    The above solution works really well but this has the benefit that it uses the existing ExtJS proxy and we don't have to use an extended class. This code adds a listener for the "exception" event to Ext.data.proxy.Server by overriding it's constructor. Since proxies get automatically created (I would guess when the Stores are created), this will add a listener to each object inheriting from this class including those used in Ajax server calls.

    Code:
    Ext.override(Ext.data.proxy.Server, {
    
            constructor: function(config)
            {
                this.callOverridden([config]);
    
                this.addListener("exception",  function (proxy, response, operation) {
                    if (response.responseText != null)
                    {
                        Ext.Msg.alert('Error', response.responseText);
                    }
                });
    
            }
    
    });
    Please post if you find this useful or have other good ways to generically handle server side exceptions.
    Thanks
    Steve

  5. #5
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


    In ExtJS 3 there was Ext.util.Observable.observeClass method that allowed to make a class observable. Not sure if there is an equivalent in ExtJS 4?

  6. #6
    Sencha User
    Join Date
    Sep 2010
    Posts
    3
    Vote Rating
    0
    scollins is on a distinguished road

      0  

    Default


    Yes in ExtJS 3.x you could do something like this:
    Code:
    Ext.util.Observable.observeClass(Ext.data.Connection);
    Ext.data.Connection.on('requestexception', function(dataconn, response, options){
         if (response.responseText != null) {
            window.document.body.innerHTML = response.responseText;
        }
    });
    I take back everything I said! This also works in ExtJS 4.x with a small modification. Doh!
    Code:
    Ext.util.Observable.observe(Ext.data.Connection);
    Ext.data.Connection.on('requestexception', function(dataconn, response, options){
         if (response.responseText != null) {
            window.document.body.innerHTML = response.responseText;
        }
    });
    Last edited by scollins; 19 Aug 2011 at 3:44 AM. Reason: Talking crap again

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    Lindsey is on a distinguished road

      0  

    Default


    I am looking to do the same thing as the original poster (I have an ExtJS 4 MVC application) - I am still totally new to ExtJS and JS, for that matter. Where would I put the proxy Ext.override statement? In app.js?
    Thanks for your help!

  8. #8
    Sencha User bclinton's Avatar
    Join Date
    Nov 2007
    Posts
    286
    Vote Rating
    11
    bclinton will become famous soon enough bclinton will become famous soon enough

      0  

    Default


    Quote Originally Posted by Lindsey View Post
    I am looking to do the same thing as the original poster (I have an ExtJS 4 MVC application) - I am still totally new to ExtJS and JS, for that matter. Where would I put the proxy Ext.override statement? In app.js?
    Somewhere between the script tag that includes the ext js library and your application definition. I like to put all my overrides in a overrides.js file and include it in script tag right after the ext js library script file.

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    Lindsey is on a distinguished road

      0  

    Default


    Makes sense. Thanks!

  10. #10
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    133
    Vote Rating
    12
    chamacs will become famous soon enough

      0  

    Default


    If you're taking an MVC approach, another option would be to create an APP.util.Overrides.js class file and include it in the 'requires' attribute of you application definition:

    requires : ['APP.util.Overrides']