Search code examples
treeviewextjs4treepanel

ExtJS4 Tree Panel - changing the icon of a node with no children?

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?

Solution

  • 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');