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

时间: 2024-10-30 09:31:38

Flex 改变树结点图标的2种方法介绍的相关文章

Flex 改变树结点图标的2种方法介绍_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

在Word文档中插入Cad图的3种方法

在word文件中插入我们绘制的cad图,方法大体上有三种,但是它们达到的效果却并不相同,有的显得精致些,有的显得粗糙些,根据我们写作的目的还要进行相应的再处理,这个过程有一些技巧,现在把它写下来,希望能给读者朋友以启发. 要在word文件中插入一个cad图,可以利用下面的三种方法来实现: 第一种,利用键盘上的"print screen sysrq"来抓取cad图,再通过系统自带的画图软件做进一步的修剪,去掉cad剪贴图中多余的部分,这项工作为了是能使图片在word文件中显示的足够的清晰

Excel剔除单列数据的重复值五种方法介绍

  有时我们在操作数据时,需要剔除单列数据的重复值,下面小编为大家介绍Excel剔除单列数据的重复值五种方法,满足大家的日常需求. 方法一:菜单按钮 如下图,是本次操作的源数据. 单击"数据"选项卡-->"数据工具"功能区-->"删除重复项",弹出"删除重复项"对话框,单击"确定"即可删除单列数据 重复值.如下图所示: 方法二:数据透视表法 依然使用上面的数据源,单击"插入"

苹果Mac虚拟机安装Win7系统的三种方法介绍

  苹果Mac虚拟机安装Win7系统的三种方法介绍          解决方法一: 1.我们这里以免费的虚拟机Virtual Box为例; 2.启动 Virtual Box 以后,点击窗口左上角的"新建"按钮; 3.接下来为虚拟取一个名称,可随意取.系统类型保持不变,版本在下拉列表中选择 Windows 7.点击"继续"按钮; 注:如果你安装的是 Windows 64 系统的话,在下拉列表中选择时,请选择 Windows 7 (64 bit). 4.然后为虚拟机分配

在word文档中打&quot;√“的几种方法介绍

  有时候,我们在做电子调查报告或者填写一些资料表,会遇到一些word文档中有小方框[□],需要在里面打钩[√],说实在的,碰到的时候还真有些烦,我想很多人都有这样的感触吧,下面小编就为大家介绍在word文档中打"√"的几种方法,不会的朋友快快来学习吧! 第一种,利用Word中的"符号"插入钩. 首先打开word文档,选择插入-符号 再符号中-选择其他符号命令 字体中选择数字运算符,找到"√ 钩",点击插入即可. 第二种,利用输入法在Word中打

PS结合数位板绘制图形的2种方法介绍

  本教材是向大家介绍PS结合数位板绘制图形的方法,教程对于PS学习者很值得学习,推荐到网管之家,希望能对大家有所帮助! 用PS+数位板绘画的2种方法,用到图层的多种模式,比如[颜色].[叠加].[正片叠底].[正常]图层模式,还用到[滤镜]-[液化]调整画面形体,还有笔刷和涂抹工具的结合使用.这些方法都有助于绘画提高效率和画面的完整. 教程结束,以上就是PS结合数位板绘制图形的2种方法介绍,希望能对大家有所帮助! 分类: PS入门教程

word2013快速插入数学公式的两种方法介绍

  我相信的原则,一切问题应该都是有效率的,只是我们没发现.比如word2013,一般都是常规插入,这样效率很低,每次都要去点击一下MathType或者是去点击插入,太浪费时间,下面带来终极解决办法,一次解决终身问题!达到点击即可编辑的效果.下面就为大家介绍word2013快速插入数学公式的两种方法,一起来看看吧! 工具/原料 WORD2013 数学公式编辑器MathType 方法1:常规蜗牛法 我们插入数学公式常用的都是插入--公式--找到公式,或者是插入--对象--对象(J)--MathTy

sql批量删除数据的几种方法介绍

sql批量删除数据的几种方法介绍 a是A表的一列,存在a=1的数据 1.Delete from A where exists (Select 1 where a=1)  2.Delete from A where exists (Select 1 from A where a=1) 结果 1:只删除a=1一条数据,2:删除所有数据. ,里面的数据是yyyy.mm.dd格式的,另外由表单提交要删除的某一年的数据,该表单名为Year,我现在想通过一个SQL语句批量删除某一年的所有记录,比如删除所有该

word文档中小于等于号怎么打 打出≤5种方法介绍

文档中小于等于号怎么打 打出≤5种方法介绍-word文档中小于等于号">方法一:在Word文档中,单击"插入"选项卡,在"符号"组中点击"符号"按钮,选择"其他符号",接着弹出"符号"对话框,将"字体"设置成"宋体","子集"选择"数学运算符",然后找到小于等于号插入即可. 方法二:在word文档中输入"