tree panel - set icon for expanded node

[dedoz]

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)

[vietits]

Try to set !important to your CSS class:


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

[marsking]

Try to set !important to your CSS class:


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


Seems working! Thanks.

[nhan]

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.

[vietits]

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;
}