How do I add a css class to a tree node in Ext4?

Question

I would like to highlight some of the nodes in an Ext.tree.Panel.

In Ext3 I accomplished this by adding a class to the tree node ui object:

// add a class with to highlight the node
myTreeNode.getUI().addClass('highlightclass');

// remove the class to remove the highlighting
myTreeNode.getUI().removeClass('highlightclass');

What is the equivalent in Ext4? I have been able to change the icon by setting the iconCls field of my node model, but I would really like to be able to set a class that allows me to highlight the whole node.

Answer 1

Here is the answer I found to my own question:

// add a css class to a specific tree node
myTreePanel.getView().addRowCls(myTreeNode,'highlightclass');

// remove a css class from a specific tree node
myTreePanel.getView().removeRowCls(myTreeNode,'highlightclass');

Answer 2

While the selected answer may work, in my version of ExtJS (4.0.7) as soon as I expand or collapse a node in my tree panel the css classes were all reset. I believe the more permanent way to fix this would be

myTreeNode.set('cls', 'highlightclass');

This will add your class to the specific tree node's td.x-grid-cell DOM element.

Hope that helps

Answer 3

To accomplish this you will need to think of the tree instead as a treegrid. Set up a columns definition for your tree with only one column, hide the header of the column and add a renderer to the column.

after that you can define your renderer like so with a css class defined for your highlighted rows and probably an attribute on the row model to tell which rows should be highlighted:

renderer: function(value, metaData){
    if (whatever you want here as a condition) {
        metaData.tdCls = "x-grid-row-alt-mine";
    }
    return value;
}