Archive for June, 2009

Code Quickie : Ensuring The Correct Accept Header In ExtJS

Wednesday, June 17th, 2009

When you are using any type of "respond to" functionality that is dependant on the Accept header in order to determine how to respond, it is important that any request you make against your application sends the appropriate headers.  This is a pretty simple thing to do when you are making your own AJAX requests, but not always that simple when using library components, such as the JsonStore, provided by ExtJS.  Below, I extend the built-in HttpProxy and TreeLoader to send the appropriate headers for the request.  These extensions are done in place and require no additional code … though, a word of warning, these extensions may break with future versions of the ExtJS framework.  The code below was tested with the RC1 release of ExtJS 3.0.

Ext.override(Ext.data.HttpProxy, {
    request: function(action, rs, params, reader, callback, scope, options) {
        if (this.conn && reader) 
            this.conn.headers = this.conn.headers || {};
            if (this.conn.headers.hasOwnProperty('Accept') == false)
                if (reader instanceof Ext.data.JsonReader) 
                    this.conn.headers['Accept'] = 'application/json';
                if (reader instanceof Ext.data.XmlReader) 
                    this.conn.headers['Accept'] = 'application/xml';                            
        Ext.data.HttpProxy.superclass.request.apply(this, arguments);

Ext.override(Ext.tree.TreeLoader, {
    requestData: function(node, callback){
        if(this.fireEvent("beforeload", this, node, callback) !== false){
            this.transId = Ext.Ajax.request({
                url: this.dataUrl||this.url,
                success: this.handleResponse,
                headers: {'Accept': 'application/json'},
                failure: this.handleFailure,
                scope: this,
                argument: {callback: callback, node: node},
                params: this.getParams(node)
            // if the load is cancelled, make sure we notify
            // the node that we are done
            if(typeof callback == "function"){

There’s not too much to this code.  In our extending of the HttpProxy we override the request method which is only defined in the HttpProxy’s base class (and consequently inherited).  In it, we check to see if there is a conn object as well as a reader and if there is, we check to see if an Accept has already been defined (just in case) and then we set the appropriate Accept header based on the type of reader that is being used.

For the TreeLoader extension, it’s not quite as simple.  Since TreeLoader directly extends from Observable there’s no method we can easily override without overwriting, so for this one, we have to copy the functionality from the TreeLoader implementation itself.  In doing so, we only have to add a headers property to the options for the AJAX request and we’re all set.