Question

I have a tree panel in an ExtJS4 application and I want to change the icon’s used for nodes so that they use the “leaf” icon when they contain no children nodes. But as soon as a child node is added to it, it reverts back to the normal folder icon. What would be the best way to achieve this?

Answer 1

Figured it out:

On initialization of the treepanel, all nodes have allowChildren:true and leaf:false, and nodes the contain no children have iconCls:'tree-leaf'. The accompanying css rule for that class is:

.x-reset .tree-leaf,
.x-reset .x-grid-tree-node-expanded .tree-leaf
{
    width: 16px;
    background-image: url('../ext4/resources/themes/images/gray/tree/leaf.gif');
}

Then if an empty node has any children nodes added to it, I programmatically remove the custom iconCls css class by:

node.set('iconCls', '');

And when the inverse occurs, when a node with children loses its children and is now empty, the custom class is programmatically added to it:

node.set('iconCls', 'tree-leaf');