Codeology

One of my annoyances with Ext is sometimes some of the widgets only half do what you want and only half support features you’d expect.

Take the TreeLoader, responsible for loading nodes into a Tree. It works well most of the time and I don’t usually need to complain about it, until today. I needed to increase the time-out for the request only the TreeLoader exposes just two configuration options for the actual request, a requestMethod so you can switch between GET and POST and the actual url. Reading the documentation and looking through Firebug there seemed no way of doing what I wanted so I had to delve into the actual source code.

It turns out yet again I need to override a core function of the component, requestData and alter the AJAX request myself. Rather than do a complete override which would affect ALL TreeLoader’s I instead extended it, the full code can be seen below:

    DCStorm.IQ.Profiles.TreeLoader = Ext.extend(Ext.tree.TreeLoader,
    {

        requestData : function(node, callback, scope){
            if(this.fireEvent("beforeload", this, node, callback) !== false){
                if(this.directFn){
                    var args = this.getParams(node);
                    args.push(this.processDirectResponse.createDelegate(this, [{callback: callback, node: node, scope: scope}], true));
                    this.directFn.apply(window, args);
                }else{
                    this.transId = Ext.Ajax.request({
                        method:this.requestMethod,
                        url: this.dataUrl || this.url,
                        timeout: this.requestTimeout,
                        success: this.handleResponse,
                        failure: this.handleFailure,
                        scope: this,
                        argument: {callback: callback, node: node, scope: scope},
                        params: this.getParams(node)
                    });
                }
            }else{
                // if the load is cancelled, make sure we notify
                // the node that we are done
                this.runCallback(callback, scope || node, []);
            }
        }

    });

The only part I actually modified was the AJAX request, I simply added a timeout configuration option and had it pull the requestTimeout value, as can be seen on line 14. So in my new TreeLoader I can do this (line 5):

        loader: new DCStorm.IQ.Profiles.TreeLoader({
             preloadChildren: true,
             clearOnLoad: true,
             requestMethod: "POST",
             requestTimeout: (60 * 2) * 1000,
             dataUrl: "profiles/backend/profiles.ashx?action=columnstree",
             baseParams: {
                        //action: "columnstree",
                        view: this.viewName,
                        level: this.profile.profile.level,
                        agency: ((this.profile.profile.level == 1) ? this.profile.profile.agency : 0),
                        site: ((this.profile.profile.level == 2) ? this.profile.profile.site : 0),
                        sitegroup: ((this.profile.profile.level == 1) ? this.profile.profile.sitegroup : 0),
                        type: "groupings",
                        filter: "",
                        selected: ""
             }
       }),

And that’s pretty much it.