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

treeview extjs4 treepanel
Bill Dami picture Bill Dami · Nov 25, 2011 · Viewed 7.3k times · Source

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

Bill Dami picture Bill Dami · Dec 5, 2011

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

Related questions

adding child nodes in treeview

I'm new to C# and don't have any programming experience. But I've finish a C# basics. Now I would like to design a simple tree view by adding parent node and child node. I would like to add a second …

Read More
Data binding to SelectedItem in a WPF Treeview

How can I retrieve the item that is selected in a WPF-treeview? I want to do this in XAML, because I want to bind it. You might think that it is SelectedItem but apparently that does not exist is readonly …

Read More
Is there any publicly accessible JSON data source to test with real world data?

I'm working on a JavaScript dynamically loaded tree view user control. I'd like to test it with real world data. Does anybody know any public service with an API that provides access to hierarchical data in JSON format?

Read More