How the change the tree node 'cls' attributes

[enotsl]

Hi, I have a problem of change the treenode 'cls' attributes,

I want to change the node's "cls" attributes of an exist tree, the code at below:
//css code
.x-form0 .x-tree-node-icon{
BACKGROUND-IMAGE: url(ui/images/form/fIcon_0.gif);
}
.x-form1 .x-tree-node-icon{
BACKGROUND-IMAGE: url(ui/images/form/fIcon_1.gif);
}

//ext code
n.setText(txt); //n is the treenode i want to change the "cls" attributes
n.attributes.sort=fsot; //"sort" is the attributes defined by myself, it's work
n.attributes.cls='x-form1'; //this is the problem line, i can not change the "cls" attributes, it is not work. i want to change the 'cls' 'x-form0' to 'x-form1'
n.leaf=n.isLeaf()

I can get the attributes by alert(n.attributes.cls), but can not change it!

Why!! please help me!! Thank you! :s:s

[BernardChhun]

the attributes property is just used at the node's creation time. You need to change the class of one of the node's ui's Element.


yourNode.ui.something-something

I'm writing this on top of my head...just check out the node's ui attribute. You'll find it

[enotsl]

hi, Bernard, Thank you for your response,

but i check the EXT API document of the TreeNode Element,

I just find the Property "UI",

ui : TreeNodeUI TreeNode Read-only. The UI for this node

and the Config Options "uiProvider ",

uiProvider : Function TreeNode A UI class to use for this node (defaults to Ext.tree.TreeNodeUI)

but i have no idea how to use them, do you have simple example to let me refer to?

Thanks!

[evant]

Unfortunately it doesn't appear to be documented. You'll have to look at the source code.

[BernardChhun]

hi, Bernard, Thank you for your response,

but i check the EXT API document of the TreeNode Element,

I just find the Property "UI",

ui : TreeNodeUI TreeNode Read-only. The UI for this node

and the Config Options "uiProvider ",

uiProvider : Function TreeNode A UI class to use for this node (defaults to Ext.tree.TreeNodeUI)

but i have no idea how to use them, do you have simple example to let me refer to?

Thanks!

ahh right I forgot about that one! 8-| when you don't have the right documentation, use the ext-all-debug.js file or firebug!

here's what I do in these cases:

use the dir() command under Firebug on one of your treeNodes

console.dir(myTree.getRootNode().ui)

this is what you should see in the console:

http://img39.picoodle.com/img/img39/9/7/16/f_dirm_7857fd6.png

get down a little bit and you will see the ui property down there. Open the object by clicking on the +.

if you look carefully at the functions under ui, you will see the ctNode property.

and here goes the code for displaying the class you've added to change your icon:


Ext.select("div.the-class-you-added-in-the-config", yourTree.theNode.getUI().ctNode ).each(
function(e){
console.log(e.dom.className)
}
);

so modifying it shouldn't be too hard:


Ext.select("div.the-class-you-added-in-the-config", yourTree.theNode.getUI().ctNode ).each(
function(e){
e.replaceClass("the-class-you-added-in-the-config", "the-new-class");
}
);

[jack.slocum]

node.ui.addClass(cls) and node.ui.removeClass(cls)

Cheers.

[BernardChhun]

node.ui.addClass(cls) and node.ui.removeClass(cls)

Cheers.

this is so simple when you write it down Jack! :))

[jack.slocum]

For reference Bernard, Ext.select returns a CompositeElement so you can change your code (which worked too by the way) from:


Ext.select("div.your-cls", theNode.getUI().ctNode ).each(
function(e){
e.replaceClass("your-cls", "the-new-class");
}
);

To:


Ext.select("div.your-cls", theNode.getUI().ctNode).replaceClass("your-cls", "the-new-class");

And it will handle the looping for you internally.

[enotsl]

Thanks! bernard and jack,

I have clear the problem from the below code get form a example:

if(n.ui && n.ui.wrap) {
Ext.fly(n.ui.wrap).addClass('x-form'+fsot);
}

But i don't know why the code can work, but it look work fine! :>:>

and jack say the "node.ui.addClass(cls)" is not work... .:-?

Thanks again! Wish you have a nice day!

[architect]

to change icon node after tree was rendered, I use the following code


var el = Ext.get(n.getUI().iconNode);
el.replaceClass(oldclass, newclass);


using the following css


.x-tree-node img.web{background-image:url('images/ie.gif');}
.x-tree-node img.acrobat{background-image:url('images/acrobat.gif');}