方法一:根据是否有子结点进行改变
复制代码 代码如下: <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> <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" 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; } } }
(编辑:均轻资讯网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|