// First some CSS !!!!!

/* node color override, in case it has entries */
.x-tree-node .x-tree-selected a span{
	background : #FF0000;
	color : yellow;
}

/* node color override, in case it has entries */
.x-tree-node .x-tree-has-children.x-tree-selected a span{
	background :#FF0000;
	color :yellow !important;
}

/* node color override, in case it has entries */
.x-tree-node .x-tree-has-children a span{
	color : #FF5500;
}

// Now some Javascript !!!!


// Initial Extjs TreeLoader

var treeLoader = new Ext.tree.TreeLoader({
        url        : zap.rt+'plan/load',
        baseParams : {
            'parameter' : 'w.structure.loadstruc',
            'book'      : 0
        },
        
        // this below is using the config attributes of the node to do
        // some testing. The attr.has_events is coming from the loader in PHP
        createNode: function(attr) {
            if (attr.has_events === true) {
                attr.cls = 'x-tree-has-children';
            }
            return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
        }
});


// Dynamically changing the color

// This function is part of a class, which is containing the TreeStructure
// here that is called MagicTree (that's the name is use). The colornode is
// the id (integer) of the node to be colored
// We seek the node by its Id and then we get its UI by the getUI()
// The needs_color is just a boolean value that is true or false	

    ColorThisNode : function (colornode, needs_color) {

        var node = this.MagicTree.getNodeById( colornode );
        var ui = node.getUI();

        if (needs_color === false) {
            ui.removeClass('x-tree-has-children');
        } else {
            ui.addClass('x-tree-has-children');
        }
    }

// Use you imagination and use it in your application, works fine with me!

/* node color override, in case it has entries */
.x-tree-node .x-tree-selected a span{
	background : #FF0000;
	color : yellow;
}

/* node color override, in case it has entries */
.x-tree-node .x-tree-has-children.x-tree-selected a span{
	background :#FF0000;
	color :yellow !important;
}

/* node color override, in case it has entries */
.x-tree-node .x-tree-has-children a span{
	color : #FF5500;
}


// Initial Extjs TreeLoader

var treeLoader = new Ext.tree.TreeLoader({
        url        : zap.rt+'plan/load',
        baseParams : {
            'parameter' : 'w.structure.loadstruc',
            'book'      : 0
        },
        
        // this below is using the config attributes of the node to do
        // some testing. The attr.has_events is coming from the loader in PHP
        createNode: function(attr) {
            if (attr.has_events === true) {
                attr.cls = 'x-tree-has-children';
            }
            return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
        }
});


// Dynamically changing the color

// This function is part of a class, which is containing the TreeStructure
// here that is called MagicTree (that's the name is use). The colornode is
// the id (integer) of the node to be colored
// We seek the node by its Id and then we get its UI by the getUI()
// The needs_color is just a boolean value that is true or false	

    ColorThisNode : function (colornode, needs_color) {

        var node = this.MagicTree.getNodeById( colornode );
        var ui = node.getUI();

        if (needs_color === false) {
            ui.removeClass('x-tree-has-children');
        } else {
            ui.addClass('x-tree-has-children');
        }
    }

// Use you imagination and use it in your application, works fine with me!

Extjs - How to color a node in a tree (dynamically)

JavaScript