PDA

View Full Version : Ext.ux.FlatJsonTreeLoader



Nicolas BUI
29 Oct 2010, 2:07 AM
Hi,

I post here a custom treeloader, I've use it in one of my project. I've needed to load a big tree and expand all the node at once, the default tree took so much time and use tons of ajax calls.

To radically reduce the number of ajax call to the server, I simply (on server side) render all the tree nodes and the custom loader simply do the rest.

You cannot refresh a particular node, you need to refresh the whole tree (it's still better as it's quite fast).

Hope it will be useful to some of you as it was really usefull to me.

Comments, Feedback, Suggestions and Improvements are greatly appreciated!

Nicolas BUI
http://www.nicolasbui.com


/**
* Ext.ux.FlatJsonTreeLoader
*
* @author Nicolas BUI
*
* The base TreeLoader will load only on level of node at time.
* To show the entire tree at start, it can be really slow as it need many ajax call to laod all the nodes.
*
* To fully reduce the number of ajax call, we need to load all the nodes at once. This is what FlatJsonTreeLoader mean to be.
*
* FlatJsonTreeLoader, expect all nodes tree in the json response. The created nodes are type of Ext.tree.TreeNode.
* To reload a node, you should reload the whole tree.
*
*
* Example :
*
* [
* {
* id: 1,
* text: "Root",
* title: "Root",
* expanded: true,
* cls": "normal",
* leaf: false,
* children: [
* {
* id: 2,
* text: "Node A",
* title":"Node A",
* expanded: true,
* cls: "normal",
* leaf":"true"
* },
* {
* id: 3,
* text: "Node B",
* title":"Node B",
* expanded: true,
* cls: "normal",
* leaf":"false",
* children: [
* {
* id: 4,
* text: "Node B.1",
* title":"Node B.1",
* expanded: true,
* cls: "normal",
* leaf":"true"
* }
* ]
* },
* ]
* }
* ]
*
*/

// safely declare namespace
Ext.ns('Ext.ux');

Ext.ux.FlatJsonTreeLoader = Ext.extend(Ext.tree.TreeLoader, {

/**
* Utility method to check if the subject is an array
*/
isArray: function(subject) {
return subject !== null && typeof(subject) === 'object' && subject.constructor === Array;
},

/**
* Override the base createNode to support child node
*/
createNode : function(attr){
if(this.baseAttrs){
Ext.applyIf(attr, this.baseAttrs);
}
if(this.applyLoader !== false){
attr.loader = this;
}
if(typeof attr.uiProvider == 'string'){
attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
}
// a node should need at least a label
if ( typeof( attr.text ) === 'string' && attr.text !== '' ) {
var node = new Ext.tree.TreeNode(attr);
// processing child nodes
if ( this.isArray( att.children ) && att.children.lenth > 0 ) {
for( var i = 0; i < attr.children.length; i++ ) {
var childNodes = this.createNode( attr.children[i] );
if ( childNodes !== null ) {
node.appendChild( childNodes );
}
}
}
return node;
}
return null;
}
});