View Full Version : Tree List icons

29 May 2011, 2:21 PM

I'm struggling with a tree list icon. Is there any chance that the tree node keeps an icon class if node is a leaf? I'd like that the folder icon remains not the default leaf icon.

I have a tree of folders. When I open a node which contains leafs (folder with no subfolders) an icon for opening a folder emerges, no matter if the node has any subnodes. I think it should not be displayed.

Is there any fix for this?

29 May 2011, 3:02 PM
If I've understood correctly, you're asking two questions here about tree node styling:

1. Is there any way to give leaf nodes a folder icon?
2. Is there any way to hide the [+] icon next to leaf nodes of an AsyncTreeNode?

You can give tree nodes any icons you like. First give them an iconCls:

new Ext.tree.TreeNode({
iconCls: 'custom',

Then you just need to use CSS to set the icon for the 3 states of a node: collapsed, expanded and leaf. In the example below I've set all 3 to use the open folder icon but it's entirely up to you:

.x-tree-node-collapsed .custom {
background-image: url( "resources/images/default/tree/folder-open.gif" ) !important;

.x-tree-node-expanded .custom {
background-image: url( "resources/images/default/tree/folder-open.gif" ) !important;

.x-tree-node-leaf .custom {
background-image: url( "resources/images/default/tree/folder-open.gif" ) !important;

For your second question, you'll need to set the leaf config option to true on your node so that Ext knows there are no children to load from the server.

30 May 2011, 11:55 PM

I know that - I'm just asking if there is any option that also when the leaf is true a folder icon is displayed.

31 May 2011, 7:10 AM
There is no such config option, you'll need to use iconCls and CSS like in my example.

31 May 2011, 10:34 PM
I tried with another iconCls, not with 'folder' and it works. However, when I switch to folder a leaf icon is displayed. Funny.

1 Jun 2011, 4:46 AM
If you're still having trouble with this you'll need to post the code that isn't working, including the CSS. There are many small mistakes that can be made that would result in you seeing the default icons.