Flex两种改变树结点图标的方法

方法一：根据是否有子结点进行改变。

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Tree{
/*去掉默认文件夹图标*/
folderClosedIcon: Embed(source='resource/region.png');
folderOpenIcon: Embed(source='resource/region.png');

/*去掉叶子节点图标
defaultLeafIcon: ClassReference(null);
*/
/*
defaultLeafIcon    指定叶图标
disclosureClosedIcon    指定的图标旁边显示一个封闭的分支节点。默认的图标是一个黑色三角形。
disclosureOpenIcon    指定的图标旁边显示一个开放的分支节点。默认的图标是一个黑色三角形。
folderClosedIcon    关闭指定的文件夹图标的一个分支节点。
folderOpenIcon    指定打开的文件夹图标的一个分支节点。
例：三角图标修改如下代码使用即可换成自己的了：

disclosureOpenIcon:Embed(source='resource/region.png');
disclosureClosedIcon:Embed(source='resource/region.png');
*/

}

</fx:Style>

方法二：根据结点的属性，灵活改变图标。

<?xml version="1.0" encoding="utf-8"?>


<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 


  xmlns:s="library://ns.adobe.com/flex/spark" 


  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">


<fx:Script>


<![CDATA[





]]>


</fx:Script>


<fx:Declarations>


<!-- 将非可视元素（例如服务、值对象）放在此处 -->


<fx:XML id="treeData">


<root>


<node label="CI配置项" iconName="computer.png">


<node label="资源" iconName="computer.png">


<node label="硬件资源" iconName="computer.png">


<node label="硬件设备" iconName="computer.png">


</node>


<node label="硬件模块" iconName="computer.png">


<node label="端口" iconName="computer.png">


</node>


</node>


</node>


</node>


</node>


<node label="字典" iconName="dictionary.png">


</node>


</root>


</fx:XML>


</fx:Declarations>


<mx:Tree left="5" top="5" bottom="5" width="150" dataProvider="{treeData}"


id="myTree"


showRoot="false" 


labelField="@label"


itemRenderer="com.flex.tree.dynamicicontree.IconTreeRenderer">


</mx:Tree>


</s:Application>




package com.flex.tree.dynamicicontree


{


import flash.xml.*;





import mx.collections.*;


import mx.controls.Image;


import mx.controls.listClasses.*;


import mx.controls.treeClasses.*;


import mx.styles.StyleManager;


/*


*  ICON Tree的渲染器


*/


public class IconTreeRenderer extends TreeItemRenderer


{


protected var myImage:ImageRenderer; 


private var imageWidth:Number = 16;


private var imageHeight:Number = 16;


private static var defaultImg:String = "windows.png";





public function IconTreeRenderer () 


{


super();


}






override protected function createChildren():void


{


super.createChildren();


myImage = new ImageRenderer();


myImage.source = defaultImg;


myImage.width=imageWidth;


myImage.height=imageHeight;


myImage.setStyle( "verticalAlign", "middle" );


addChild(myImage);


}


//通过覆盖data方法来动态设置tree的节点图标


override public function set data(value:Object):void


{


super.data = value;


var imageSource:String=value.@iconName.toString();





if(imageSource!="")


{


myImage.source=imageSource;


}else{


myImage.source=defaultImg;


}





}


//隐藏原有图标，并设置它的坐标


override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void


{


super.updateDisplayList(unscaledWidth, unscaledHeight);


if(super.data !=null)


{


if (super.icon != null)


{


myImage.x = super.icon.x;


myImage.y = 2;


super.icon.visible=false;


}


else


{


myImage.x = super.label.x;


myImage.y = 2;


super.label.x = myImage.x + myImage.width + 17;


}


}


}


}


}
package com.flex.tree.dynamicicontree


{


import mx.controls.Image;






public class ImageRenderer extends Image


{


private var defaultURL:String = "assets/icon/";


public var iconName:String;


public function ImageRenderer()


{


super();


}


override public function set source(url:Object):void{


super.source = defaultURL + url;


iconName = url as String;


}


}


}