View Full Version : tree icon needs classname for proper styling in IE

30 Mar 2007, 2:38 AM
instead of just
"x-tree-node-icon" it needs a class that reflects the collapsed/expanded state

currently when using the cls attribute on a treenode to style the node icon it's impossible to nest folders with different expanded/collapsed icons and style them properly for IE.

this problem only occurs in IE6+7 when having folders nested and and different expanded/collapsed icons applied. and only on the expanded state!

a possible fix would be to apply the replaceClass() in Ext.tree.TreeNodeUI.prototype.updateExpandIcon not only to this.elNode but to this.iconNode as well.

see this thread for more details


3 Apr 2007, 11:34 AM
There is a new option that should fix this in the trunk.

I have added a new attribute "iconCls" which is applied directly to the node's icon. Using it in combo with cls could give even more flexibility.

4 Apr 2007, 2:28 AM
thanks jack, thats great :)

now you can use such class combos
.x-tree-node-expanded img.folder_220 {...
.x-tree-node-collapsed img.folder_220 {...

without having to rely on IE's crappy multiclass behavior :))

11 Jul 2008, 1:49 PM
Can someone post a example how to do this?

26 Aug 2008, 9:03 AM
yeah, it's fairly simple.

in the json you use to load your tree view simply add "iconCls" like so:


"expanded": true,


"text":"Add User",


then, in your css you'd simply define your rule to change the icon, similar to this...

.x-tree-node-leaf img.tree-new-icon { background-image:url(/resources/images/default/tree/drop-add.gif); }

14 Feb 2009, 1:36 AM
detail guides, I've just fixed it

11 Aug 2009, 3:44 AM
this only works if the node is leaf:true? how bout the ones with leaf:false? does this also work? can i have some examples? thanks!

24 Feb 2010, 7:37 AM
for me this fix is ok, tnx a lot!