This is how to change the text color of a TreeNode

[Stansin Cruller]

Hi everybody,
It is quite peculiar how something as trivial as setting a text color of a tree node might turn out to be a nightmare. Anyway this is how it can be done.

First , if one examines with firebug the HTML part of the page, one finds out that the CSS class ('cls' attribute of a TreeNode) that is supposed to customize the appearance of a tree node, does not in fact have full control over how the page is rendered. The reason being the fact that there is this one class(.x-tree-node a span) that basically overrides any other class's properties, and surprise it is that one class that sets the text color (this one being the only property it sets).
So what do we do? well we can directly add classes to 'span' (the element that holds the text), so as to override any other previous settings.
So we override renderElements method of TreeNodeUI, and put an 'id' attribute to every 'span', of course the attribute must be unique so we put something like '<... class="span-class-'+node.id+'"' ...'
and then inside any routine do:
Ext.get('span-class'+node.id).addClass(<CUSTOM-CLASS-NAME>); and
Ext.get('span-class'+node.id).removeClass(<CUSTOM-CLASS-NAME>);

Example:
Inside our JavaScript:

<style>
.x-tree-node a span {
    line-height: 25px !important;
    font-size: 12px !important;
    font-weight: normal;
}
.red-bold-node{
    color: red !important;
    font-weight: bold !important;
}
<style>

...
//Inside some onClick event
//we turn the text of a node red & bold
Ext.get('span-class-'+node.id).addClass('red-bold-node');
...

//Inside some other onClick event
//the node returns normal
Ext.get('span-class-'+node.id).removeClass('red-bold-node');
... 

and of course we need to override the default 'renderElements' method and add an 'id' attribute to the span element
(this is taken directly from the source code of the library)

Ext.override( Ext.tree.TreeNodeUI, {
            renderElements : function(n, a, targetNode, bulkRender){
                // add some indent caching, this helps performance when rendering a large tree
                this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

                var cb = typeof a.checked == 'boolean';
                
                var href = a.href ? a.href : Ext.isGecko ? "" : "#";
                var buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
                       '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
                    '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
                    '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
                    cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
                    '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
                    a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span id="span-class-'+n.id+'" unselectable="on">',n.text,"</span></a></div>",
                    '<ul class="x-tree-node-ct" style="display:none;"></ul>',
                    "</li>"].join('');
                
                var nel;
                if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
                    this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
                }else{
                    this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
                }
                
                this.elNode = this.wrap.childNodes[0];
                this.ctNode = this.wrap.childNodes[1];
                var cs = this.elNode.childNodes;
                this.indentNode = cs[0];
                this.ecNode = cs[1];
                this.iconNode = cs[2];
                var index = 3;
                if(cb){
                    this.checkbox = cs[3];
                    // fix for IE6
                    this.checkbox.defaultChecked = this.checkbox.checked;
                    index++;
                }
                this.anchor = cs[index];
                this.textNode = cs[index].firstChild;
            }
        });

[mjaomaha]

This very issue was a pain in my side, and I thought there must be an easier way. I was using Firefox, and found that the text color was actually getting overwritten by this css style in the ext-all.css:

.x-tree-node a span,

.x-dd-drag-ghost a span{
color:#000;

}

The nodes themselves have an <a> tag with a <span> tag inside. Because this rule is so specific, it has to be overwritten with a rule just as specific. For your style, you can define something like the following:

.buckettextred

{
font-size: 18pt;
color: #D21916;
}

.buckettextred a span

{
color:#D21916;

}

Then just use the cls feature on the treeNode as it exists, no modifications necessary, and your font will be the correct color.

Hope this helps you avoid 2 hours of research like it did me.