Question

How can I change the tree node icons on a per node basis when when the node supports expand/collapse?

For example, I can set the expand/collapse icons globally for the tree using this CSS:

#reports-tree .x-tree-icon-parent
{
    background-image: url('../images/tree/folder_closed.png');
    background-repeat: no-repeat;
}

#reports-tree .x-grid-tree-node-expanded .x-tree-icon-parent
{
    background-image: url("../images/tree/folder_opened.png");
    background-repeat: no-repeat;
}

I can also set individual leaf icons using iconCls as standard.

However, in some cases I have non-leaf nodes that I want to give a custom icon and NOT use the normal expand/collapse icons.

Answer 1

It seems the solution is to drop in !important for the icon CSS, e.g:

.sg-arp-reports-tree-report-stim {
    background-image: url('../images/tree/report_stim.png') !important;
    background-repeat: no-repeat;
}

This seems to work as expected and keeps the icon the same regardless of expanded/collapsed or leaf/not-leaf.