Flex 改变树结点图标的2种方法介绍_Flex教程-查字典教程网
Flex 改变树结点图标的2种方法介绍
Flex 改变树结点图标的2种方法介绍
发布时间:2016-12-29 来源:查字典编辑
摘要:方法一:根据是否有子结点进行改变复制代码代码如下:@namespaces"library://ns.adobe.com/flex/spark...

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

复制代码 代码如下:

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

}

}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Flex学习
    热门Flex学习
    编程开发子分类