1

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?

Bill Dami
  • 3,205
  • 5
  • 51
  • 70
  • I don't understand. When you add a child, it no longer "contains no children nodes". So do you mean you want the leaf icon to be permanent? – James Clark Dec 04 '11 at 04:27

2 Answers2

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');
Bill Dami
  • 3,205
  • 5
  • 51
  • 70
0

Create your own css sheet and copy the following style, this will overwrite the default style and put your images instead of the theme

.x-tree-icon-leaf {
    background-color: transparent;
    width: 16px;
    height: 16px;
    background-image:url(../img/neogeo.png) !important;
}
.x-tree-icon-parent {
    background-color: transparent;
    width: 16px;
    height: 16px;
    background-image:url(../img/folder-pass.png) !important;
}
.x-tree-icon-parent-expanded {
    background-color: transparent;
    width: 16px;
    height: 16px;
    background-image:url(../img/folder-open-pass.png) !important;
}
Rbp
  • 1