The following example shows you how you can override a specific node’s icon in a Flex Tree control ysing the Tree class’s setItemIcon() method.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/29/setting-icons-for-specific-nodes-in-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
[Embed("assets/folder_table.png")]
private var FolderTableIcon:Class;
[Embed("assets/folder_user.png")]
private var FolderUserIcon:Class;
[Embed("assets/folder_wrench.png")]
private var FolderWrenchIcon:Class;
private function init():void {
var nodeOne:XML = xmlListColl.getItemAt(0) as XML;
tree.setItemIcon(nodeOne, FolderTableIcon, FolderTableIcon);
var nodeTwo:XML = xmlListColl.getItemAt(1) as XML;
tree.setItemIcon(nodeTwo, FolderUserIcon, FolderUserIcon);
var nodeThree:XML = xmlListColl.getItemAt(2) as XML;
tree.setItemIcon(nodeThree, FolderWrenchIcon, FolderWrenchIcon);
}
]]>
</mx:Script>
<mx:XMLListCollection id="xmlListColl">
<mx:source>
<mx:XMLList>
<node label="One">
<node label="One.1">
<node label="One.1.1">
<node label="One.1.1.1">
<node label="One.1.1.1.1" />
</node>
</node>
</node>
<node label="One.2" />
<node label="One.3" />
</node>
<node label="Two">
<node label="Two.1" />
<node label="Two.2" />
<node label="Two.3" />
</node>
<node label="Three" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:Tree id="tree"
dataProvider="{xmlListColl}"
labelField="@label"
width="250"
rowCount="6"
showScrollTips="true" />
</mx:Application>
View source is enabled in the following example.
Nice example, but how to assign an icon for each level in the tree. One icon for the root, one for the first node level, etc. etc.
Yeah I’ll second that! That would be a great example to see. I’m creating a tree of databases, that contain tables and then columns. Each level I would like to place a different column. I’ve learned about setting isBranch attribute on my XML tags, is their something just like that but for icons by chance?? That would be super helpful.
Hi! I made this simple function to get the node level:
public static function getItemLevel( tree:Tree, item:Object ):Number { if ( item == null ) return 0; return 1 + getItemLevel( tree, tree.getParentItem( item ) ); }PS: You can use the iconFunction of the tree control to display the icons depending on the tree level.