Why is iconField ignored for branch nodes with the Flex Tree component?

Question

I'm using the iconField property of the Flex Tree to dynamically set the icon that a node should use. This works fine for leaf nodes but for branch nodes it doesn't seem to respect my iconField and instead just shows the default folder node.

Here's a simple repro:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
    <![CDATA[
        [Embed("assets/icon1.png")]
        public var icon1:Class;

        [Embed("assets/icon2.png")]
        public var icon2:Class;
    ]]>
</mx:Script>

<mx:XML id="dp">
    <node label="Sales" icon="icon1">
        <node label="East" icon="icon2"/>
        <node label="West" icon="icon2"/>
    </node>
</mx:XML>

<mx:Tree dataProvider="{dp}" labelField="@label" iconField="@icon"
 width="100%" height="100%" />

</mx:Application>

What happens is that icon2 shows for the East and West nodes but icon1 doesn't show for the Sales node. How can I get this to work?

Answer 1

Almost! You need to set the folderOpenIcon and folderClosedIcon like so:

<mx:Tree dataProvider="{dp}" labelField="@label" iconField="@icon"
   folderOpenIcon="{icon3}"
   folderClosedIcon="{icon4}"
   width="100%" height="100%" />

Answer 2

I think it can be done with an iconFunction... This looks like it does what you want:

http://blog.flexexamples.com/2007/11/15/creating-a-custom-icon-function-on-a-flex-tree-control/

Answer 3

I see. susichan was right with iconFunction:

<mx:Script>
 <![CDATA[
  [Embed("icon1.png")]
  public var icon1:Class;

  [Embed("icon2.png")]
  public var icon2:Class;

  [Embed("icon3.png")]
  public var icon3:Class;

  private function setIcons(item:Object):Class {
   var iconClass:Class;
   var classType:String = XML(item).attribute("icon");
   if(classType!="")
    return this[classType];
   else
    return null;
  }


 ]]>
</mx:Script>

<mx:XML id="dp">
 <root>
   <node label="Sales" icon="icon1">
    <node label="East" icon="icon3"/>
    <node label="West" icon="icon3"/>
   </node>
   <node label="Non-Sales" icon="icon2">
    <node label="East" icon="icon3"/>
    <node label="West" icon="icon3"/>
   </node>
 </root>
</mx:XML>

<mx:Tree dataProvider="{dp.node}" labelField="@label" iconField="@icon"
   iconFunction="setIcons" showRoot="true"
   width="100%" height="100%" />

Answer 4

visit this site