PDA

View Full Version : How to change a treeNode icon when clicked?



netharry
20 Oct 2007, 5:41 AM
hi all,
How to change a treeNode icon when this treenode is clicked?
thanks.

Animal
20 Oct 2007, 5:50 AM
http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreeNode&member=getUI

http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreeNodeUI&member=getIconEl

Change the class of that to use your own 16px by 16px background image.

netharry
20 Oct 2007, 9:07 AM
thanks.

Farish
21 Jun 2011, 12:06 AM
I just want to change the icon of the tree nodes (fixed i.e. not to be changed on events). How can I do it in ExtJS 4?

russall1985
8 Jul 2011, 9:39 AM
This is a pretty messy way of doing it but got it to work. You can use the htmlItem which is passed through the event to change the css class applied to the node.

event

'itemcontextmenu':function(view, record, htmlItem, index, e)

Get the element and change the css class


var nodeIconEl = Ext.get(htmlItem.children[0].children[0].children[3]);
nodeIconEl.removeCls('icon-document');
nodeIconEl.addCls('icon-document_lock');

like I said sloppy but works.

Farish
8 Jul 2011, 9:41 AM
thanks!

will try it on monday

russall1985
8 Jul 2011, 10:01 AM
I added a method to the Ext.tree.Panel class to make it easier


Ext.tree.Panel.updateNodeIcon = function(htmlItem, oldCssCls, newCssCls){
var nodeIconEl = Ext.get(htmlItem.children[0].children[0].children[3]);
nodeIconEl.removeCls(oldCssCls);
nodeIconEl.addCls(newCssCls);
};

usage



Ext.tree.Panel.updateNodeIcon(htmlItem, 'icon-document', 'icon-document_lock');

budnik
13 Jul 2011, 2:18 AM
We got solution from Evan Trimboli.

It's rather simple:

node.set('iconCls', your-icon-class);