Friday, April 11, 2014

ExtJS Rant

First, let me say that I have very few negative comments regarding ExtJS/Sencha. I use it and consider it the premier* client-side javascript framework for web applications.

* I know there are many alternatives out there and am not trying to incite a holy war. This is simply my opinion: swayed by many things, not the least of which is the fact that Java is my "native" language. 

However, I finally came across something that just simply irked me. Simply, there is an AJAX/JSON Reader property on the proxy object named 'messageProperty'. One would think that this could be used somewhere/somehow. As near as I can tell, it is virtually useless.

Here is some pretty boilerplate sample code from the common use case of programmatically synchronizing the Store in response to a Button click:

someStore = Ext.create('Ext.data.Store', {
    model: 'someModel'
    ,autoLoad: true // set to true for production
    ,autoSync: false // set to false since we are submitting the form via AJAX, in lieu of using store syncing
    ,sorters: [ { root: 'data' ,property: 'id' ,direction: 'DESC' } ] // ASC | DESC
    ,proxy: {
        type: 'ajax'
        ,listeners: { exception: aCommonExceptionListener }
        ,reader: { type: 'json', root: 'data', successProperty: 'success', messageProperty: 'message' }
        ,writer: { type: 'json', root: 'data', encode: true, allowSingle: false }
        ,api: { 
            read: 'aRestUrl/view' 
            ,update: 'aRestUrl/update' 
        }
    }
});

namespace.doSaveChanges = function() {

    var options = {
        callback: function() { }
        ,success: function() {
            a.LoadMask.hide();            
            Ext.Msg.show( { title: 'Success'
                ,msg: 'Changes were Saved'
                ,buttons: Ext.Msg.OK
                ,icon: Ext.Msg.INFO
            } );
            Ext.Msg.setY(25);                
        }
        ,failure: function(batch, options) { 
            a.LoadMask.hide();            
            Ext.Msg.show( { title: 'Error'
                ,msg: batch.proxy.reader.rawData.message
                ,buttons: Ext.Msg.OK
                ,icon: Ext.Msg.ERROR
            } );
            Ext.Msg.setY(25);
        }
    };
    yourStore.sync(options);
}; 

So... notice the message property defined in the Store's Proxy.  Based on the similar property 'successProperty', I think it is safe to assume that the Proxy will make the JSON object with this name available to your code via a getter [like getMessage() !!!].  Nope,... you will notice that I have to navigate the batch.proxy.reader.rawData.message property manually.  AND... there is no abstraction of 'message' at all at this point... You are forced to use the exact message property that you send!

If I am missing something, please educate me.  Please.  But until then... total fail on this on fellas.

p.s. This is totally unrelated to this rant but I wanted to capture it.  I am using Spring WebMVC and, though this is documented by sencha, it is not exactly obvious.  It is important that you configure your JSON writer with this...

root: 'data', encode: true

to ensure that Spring will put the JSON into the 'data' parameter on the request.

@RequestMapping(value="aRestUrl/update", method=RequestMethod.POST)
public void update(HttpServletRequest request, HttpServletResponse response) throws IOException {

    final UserRequestContext ctx = this.createRequestContext(request, null);
    final String data = request.getParameter("data");        
    
    final ServiceResponse sr = this.getService().updateSpecialQuestions(ctx, data);
    final ExtJSAJAX model = new ExtJSAJAX(sr);       
    
    this.getJSON(response, model);
}    

No comments: