View Full Version : tree panel - set icon for expanded node

7 Aug 2012, 3:23 PM
im trying to set the icon (image) of a tree node.
using the iconCls property (on the node) works fine when the node is collapsed,
but when i expand it shows a "open folder" icon , how can i configure the node to display the same icon when the node is collapsed and expanded ?

example code taken from ext docs, just added the iconCls line

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: false, iconCls : 'myIcon',
children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }

Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()

myIcon style (CSS)

.myIcon { background : url('someImage.gif') no-repeat; }

works fine, but then when u click the node to expand it, shows another icon (open folder image)

7 Aug 2012, 5:47 PM
Try to set !important to your CSS class:

.myIcon { background : url('someImage.gif') !important; }

16 Aug 2012, 9:42 PM
Try to set !important to your CSS class:

.myIcon { background : url('someImage.gif') !important; }

Seems working! Thanks.

25 Oct 2012, 1:31 PM
If I want to show one icon for an open node and another one for closed node (let's say "+" and "-"). What do I do?
Thanks for any suggestions or samples.

25 Oct 2012, 4:34 PM
Try this. Suppose iconCls for folder is "myFolder" and for leaf node is "myLeaf".

.myLeaf {
background-image: url('myleaf.gif') !important;

.myFolder {
background-image: url('myfolder.gif') !important;

.x-grid-tree-node-expanded .myFolder {
background-image: url('myfolder-open.gif') !important;