Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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 ) ); }Slt Andry ,
Suis gasy , et j’aimerai correspondre avec toi , car suis un flexeur débudant.
Cdlt.
rakri
PS: You can use the iconFunction of the tree control to display the icons depending on the tree level.
nice job, thanks, you helped me.
is it possible to add image button next to value (i.e after One.1) on mouse over the node ?
is it possible to add image button next to value (i.e after One.1) on mouse over the node ? how to do this
help!
Hi peter,
I have an XML(not XMLListCollection) with the nodes having a ‘type’ property. I wanna set different icons to different nodes based on this ‘type’ property.
How do i do that?
@Ronnie,
You can set a custom icon function to determine which icon to use for a node using the
iconFunctionproperty. For more information, see “Creating a custom icon function on a Flex Tree control”.Peter
hi, im using the setItemIcon, and i have some problems. for example, in the last level, it always set the same image…
is this function only for setting a level node, or you can set a particulary icon for each element?
Great job, Peter! Thanks