Flex 改变Tree树结点图标的方法

Flex #tree #图标2014-04-10 10:28

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

< 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');
/*去掉叶子节点图标 http://yige.org/
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;
}
}
}

Flex 改变Tree树结点图标的方法

相关文章