Flex Examples
The following example shows how you can specify a custom icon field in a Flex Tree control to set an icon on a specific node.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/15/setting-a-custom-icon-field-in-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
[Bindable]
[Embed("assets/bullet_star.png")]
public var myBulletStarIcon:Class;
]]>
</mx:Script>
<mx:XML id="dp">
<mlb>
<league label="American League">
<division label="East">
<team label="Boston" icon="myBulletStarIcon" />
<team label="New York" />
<team label="Toronto" />
<team label="Baltimore" />
<team label="Tampa Bay" />
</division>
<division label="Central">
<team label="Cleveland" icon="myBulletStarIcon" />
<team label="Detroit" />
<team label="Minnesota" />
<team label="Chicago" />
<team label="Kansas City" />
</division>
<division label="West">
<team label="Los Angeles" icon="myBulletStarIcon" />
<team label="Seattle" />
<team label="Oakland" />
<team label="Texas" />
</division>
</league>
</mlb>
</mx:XML>
<mx:Tree id="TreeProject"
dataProvider="{dp.league}"
labelField="@label"
iconField="@icon"
showRoot="true"
width="320"
height="240" />
</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
Thanks. How about an example of dynamically setting the icon based on some data values?
Never mind. I just needed to look at your other example. Thanks!
hi,How to hide the icon???
I want only the Arrow display not Folder icon.
Anonymous,
Try something like the following:
<mx:Style> Tree { folder-closed-icon: ClassReference(null); folder-open-icon: ClassReference(null); } </mx:Style>Hope that helps,
Peter
UPDATE: In fact, I just posted a new entry, “Removing folder icons from the Flex Tree control”, if you want a full example.
Thank you for the code.
Any chance you’ve got an example that allows for setting a unique icon based on the level of nesting? I.e., I’d like to have one icon for the first level of hierarchy, a different one for the second, etc.
There’s a guy going by name ‘lexxwern’ over at Experts-Exchange who’s copy-pasting your code (fortunately with the commented out source link intact) but without referencing you directly.
For all I know you might be the same person, otherwise I thought you might have some thoughts about that. I appreciate your effort here.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_24376319.html
Anon,
Nope, it isn’t me, but I more or less gave up trying to stop people from stealing my code. This blog has always been released under a Creative Commons license, but that never matters at the end of the day.
I guess it’s all good as long as people are finding the content useful (I hope) and maybe eventually they’ll come back here. I’ve also been trying to add my content to other sources such as the Adobe Flex Cookbook (http://www.adobe.com/go/flex_cookbook) and I’m hoping to get some content added to the Adobe Tour de Flex (http://www.adobe.com/devnet/flex/tourdeflex/).
Peter