Skip to content
June 2, 2010 / Andy

Creating Extjs TreeNodes client side


Recently I converted my back-end to a almost purely RESTful implementation. It works great and simplifies a lot but it causes a few problems as well. One of them being getting data into extjs TreePanels. To keep the API simple I no longer want to create extra controllers that formatted the data into nodes. My solution was to create the Ext.ux.CustomNodeTreeLoader.


The general idea is that you intercept the raw data from your ajax calls and then write a custom function to convert that data into nodes in your front-end.

Ext.namespace('Ext.ux');

/* Works the same as the normal tree loader but has an extra
 * config option called customLoad which expects a function.
 * The function is passed the decoded JSON responseText from
 * the nodes ajax call as well as the node itself.
 * 
 * This is handy for intercepting the ajax and creating nodes
 * based on the response. That way the backend can stay general
 * and decoupled.
 * 
 * Andy, 4/27/2010
 */
Ext.ux.CustomNodeTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
	processResponse:function(response, node, callback, scope) {
	    var json = response.responseText;
	    try {
	        var o = response.responseData || Ext.decode(json);
	        
	        // Andy, call custom load if you want to construct
	        // your own nodes from raw data.
	        o = this.customLoad(o, node);
	        
	        node.beginUpdate();
	        for(var i = 0, len = o.length; i < len; i++){
	            var n = this.createNode(o[i]);
	            if(n){
	                node.appendChild(n);
	            }
	        }
	        node.endUpdate();
	        this.runCallback(callback, scope || node, [node]);
	    }catch(e){
	        this.handleFailure(response);
	    }
	},
	
	// This is the function that you need to override. Currently
	// it only gives the same functionality as Ext.tree.TreeLoader.
	customLoad:function(o, node) {
		return o;
	}
});

Ext.reg('customnodetreeloader', Ext.ux.CustomNodeTreeLoader);


Now inside your TreePanel’s loader you can use the config option customLoad.

loader:new Ext.ux.CustomNodeTreeLoader({
	dataUrl:'/acl/users',
	requestMethod:'GET',
	customLoad:function(data, node) {
		// data is the decoded response.responseText
		// node is the node that's being expanded

		var nodes = [];
		var users = data.data;
		Ext.each(users, function(user) {
			nodes.push({
				text:user.username,
				leaf:true,
				iconCls:'user_icon'
			});
		});

		return nodes;
	},
	headers:{
		'Content-Type':'application/json'
	}
})
About these ads

One Comment

Leave a Comment
  1. Alex Gorman / Jun 3 2010 6:02 PM

    That’s fascinating. So codey.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: