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

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 2

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 3

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%" />

友情链接