Flex：Tree中自定义ICON的几种方式

From: http://yecon.blog.hexun.com/30744073_d.html#

1、默认的Tree的属性是文件夹和文件都是通过 folderOpenIcon, folderClosedIcon, and defaultLeafIcon 来执行的，如果在程序中需要取得默认的参数可以通过这几个参数进行处理

    var myMenu:SysMenu = SysMenu(item);
    if(myMenu.children.length==0){
     return leftMenuTree.getStyle("defaultLeafIcon");
    }
    if ( leftMenuTree.isItemOpen(item) ) {
            return leftMenuTree.getStyle("folderOpenIcon");
         } else {
            return leftMenuTree.getStyle("folderClosedIcon");
         }

当然也可以直接通过flex的标签来制定

<mx:Tree folderOpenIcon="@Embed(source='open.jpg')"folderClosedIcon="@Embed(source='closed.jpg')"defaultLeafIcon="@Embed(source='def.jpg')">

 

2、通过data provider来提供数据源的时候就指定icon

<mx:XMLList>
         <node label="New">
            <node label="HTML Document" icon="iconSymbol2"/>
            <node label="Text Document" icon="iconSymbol2"/>
         </node>
         <node label="Close" icon="iconSymbol1"/>
      </mx:XMLList>

 

3、通过函数setItemItcon

         [Bindable]
         [Embed(source="assets/radioIcon.jpg")]
         public var iconSymbol1:Class;
         [Bindable]
         [Embed(source="assets/topIcon.jpg")]
         public var iconSymbol2:Class;
        
         private function setIcons():void {
            myTree.setItemIcon(myTree.dataProvider.getItemAt(0),
               iconSymbol1, iconSymbol2);
            myTree.setItemIcon(myTree.dataProvider.getItemAt(1),
               iconSymbol2, null);
         }

4、Tree支持显示icon的属性iconFunction ，自定义处理函数就可以了，示例如下

<?xml version="1.0" encoding="utf-8"?>
<!-- http://yecon.blog.hexun.com/30744073_d.html -->
<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>