Flex 改变树结点图标的2种方法介绍

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

<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=[e-mail]();
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;
}
}
}