Rendering TreeNode(s) from json

[hyankov]

Hello guys, I need some help.

I have a TreePanel, with a TreeLoader and a root node of AsyncTreeNode type. The dataUrl is returning me json. In other words:


var packagesTree = new Ext.tree.TreePanel('packages_Tree', {
animate:true,
loader: new Ext.tree.TreeLoader({dataUrl: packages_jsonTreeUrl}),
enableDD:true,
containerScroll: true,
rootVisible: false
});

if (packages_sortTree){
new Ext.tree.TreeSorter(packagesTree, {folderSort:true});
}

// set the root node
var root = new Ext.tree.AsyncTreeNode({
text: 'root',
draggable: false,
id: 'source'
});
packagesTree.setRootNode(root);

// render the tree
packagesTree.render();

Now, when I load the tree from a xml I have control over how each and single TreeNode is rendered. For example, I can check if the xml node has specific attribute and depending on it I can render the TreeNode one way or another. I don't see how this is done with json.

Here is my problem. Let's say my json returns the following format:

[
{"id":"xxx","text":"xxx","Type":"xxx","Active":true|false,"Version:"xxx"},
{"id":"xxx","text":"xxx","Type":"xxx","Active":true|false,"Version:"xxx"}

...
]

How do I intercept each (not only the children of the root) TreeNode render event for this tree, so I can control the way it's rendered, depending on my custom attributes or other factors? Somebody mentioned the event 'beforerender', but I can't figure out which control fires it.

Preferably I'd like to have control over the creation itself of the TreeNode, so I can specify config values. Is this possible?

Any help is appreciated!

[hyankov]

Come on, nobody knows how to do mapping in a TreeNode/TreePanel from json?

[BernardChhun]

hey dude, I don't mean to be rude or anything but some of us do know but we aren't here 24 hours a day.
As I've never used XML to render the TreePanel, I don't really know what you mean by controlling the way a node is rendered.

Anyways with JSON, I'm doing something similar to what you want in the TreePanel's append event:


tree.on('append',
function(root, parent, node, index){
// do stuff here.
}, this, true
);

what kind of modification do you want to make on those TreeNodes by the way?

[hyankov]

Thanks man, sorry for the rush, I had a deadline and was desperate.

This works partially for me. The node is already created and it's too late to set it's icon, depending on some of its attributes, isn't it?

[BernardChhun]

Thanks man, sorry for the rush, I had a deadline and was desperate.

This works partially for me. The node is already created and it's too late to set it's icon, depending on some of its attributes, isn't it?

not at all dude, just change its CSS class. look into the treeNode.ui to find the appropriate ui element to change.

and why don't ya check those things that changes your node on your server side? Once you know what kinda node you want just set its cls attribute to the appropriate css class.

[hyankov]

Thanks, yea, I know this, I just gave an example for the icon. I have other cases too, which must be handled in the UI, based on what the back-end sends.

Thanks!