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;
        }
    }
}

相关文章

粤ICP备11097351号-1