The following example shows how you can build a custom icon function on a Flex Tree control to display different icons depending on the current node name in the data provider.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/15/creating-a-custom-icon-function-on-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_go.png")]
private var myBulletGoIcon:Class;
[Bindable]
[Embed("assets/bullet_star.png")]
private var myBulletStarIcon:Class;
[Bindable]
[Embed("assets/bullet_wrench.png")]
private var myBulletWrenchIcon:Class;
private function tree_iconFunc(item:Object):Class {
var iconClass:Class;
switch (XML(item).localName()) {
case "league":
iconClass = myBulletGoIcon;
break;
case "division":
iconClass = myBulletStarIcon;
break;
case "team":
iconClass = myBulletWrenchIcon;
break;
}
return iconClass;
}
]]>
</mx:Script>
<mx:XML id="dp">
<mlb>
<league label="American League">
<division label="East">
<team label="Boston" />
<team label="New York" />
<team label="Toronto" />
<team label="Baltimore" />
<team label="Tampa Bay" />
</division>
<division label="Central">
<team label="Cleveland" />
<team label="Detroit" />
<team label="Minnesota" />
<team label="Chicago" />
<team label="Kansas City" />
</division>
<division label="West">
<team label="Los Angeles" />
<team label="Seattle" />
<team label="Oakland" />
<team label="Texas" />
</division>
</league>
</mlb>
</mx:XML>
<mx:Tree id="TreeProject"
dataProvider="{dp.league}"
labelField="@label"
showRoot="true"
iconFunction="tree_iconFunc"
width="320"
height="240" />
</mx:Application>
View source is enabled in the following example.
{ 7 comments… read them below or add one }
Is there no way the switch case can be made more dynamic? Is there a way to dynamically create the icon class? Because the switch-case forces me to declare every icon class that I would potentially want to use
Great,
Just what I was looking for.. Keep up the good work!! ps. maybee you can have a little lighter color on this blog, so it doesnt feel like a warez site..thanks again for the example..
Hi,
The above example is nice one & I do have a same kind of requirement. But after implementing the above concept I’m finding another issue. I don’t want to display the default ARROW (“>”) icon before the icon images. But once I remove/shade it the tree node expansion does not work. Can you please advice how this can be done?
Many Thanks
Cheers
Partha
Partha,
You can try the following: “Opening branches by clicking rows in a Tree control in Flex”
Peter
Hi Peter,
Thanks for your reply, but unfortunately the above example is not working for my case. My application is bit complex. Let me explain how my application is working:
1. Initially I have a static XML, where most are parent node (0′th level) and few of them has child node (1st level).
2. I call a function from “ItemOpen” property of the tree. This take “TreeEvent”. This function fetch data for 2nd level (if the parent level is 0 or 3rd level data if parent level is 1).
3. Again when, newly populated node (whether it is 2nd or 3rd level) is opened the function retrieve 4th level data…so on.
Now, in your example expansion & collasp is handle by “ListEvent” event type. But same thing I could not replicate in my application where we have “”TreeEvent” as event type.
Not sure, whether I am able to make you understand about the problem or not? But if you have any further more advice then please let me know. It will be great help for me.
Many Thanks
Partha
Hi all.
Thank you for your examples.
But I can’t understand how to make it dinamic.
I find the icon path in a XML document, but I’m not able to attach it to a tree…
Hi all.
I tried this feature but the “Item” value of the function SetIcons is always null.
For information i use a http service to “import” a XML File. So i get always as icon the default icon.
Someone has an idea ?
Thanks.
Nico