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.
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.