Flex Examples

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.

View MXML

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