Flex 改變樹(shù)結(jié)點(diǎn)圖標(biāo)的2種方法介紹
更新時(shí)間:2013年07月09日 17:35:12 作者:
本文為大家介紹兩種方法改變樹(shù)結(jié)點(diǎn)圖標(biāo):根據(jù)是否有子結(jié)點(diǎn)進(jìn)行改變、根據(jù)結(jié)點(diǎn)的屬性,靈活改變圖標(biāo),具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助
方法一:根據(jù)是否有子結(jié)點(diǎn)進(jìn)行改變
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Tree{
/*去掉默認(rèn)文件夾圖標(biāo)*/
folderClosedIcon: Embed(source='resource/region.png');
folderOpenIcon: Embed(source='resource/region.png');
/*去掉葉子節(jié)點(diǎn)圖標(biāo)
defaultLeafIcon: ClassReference(null);
*/
/*
defaultLeafIcon 指定葉圖標(biāo)
disclosureClosedIcon 指定的圖標(biāo)旁邊顯示一個(gè)封閉的分支節(jié)點(diǎn)。默認(rèn)的圖標(biāo)是一個(gè)黑色三角形。
disclosureOpenIcon 指定的圖標(biāo)旁邊顯示一個(gè)開(kāi)放的分支節(jié)點(diǎn)。默認(rèn)的圖標(biāo)是一個(gè)黑色三角形。
folderClosedIcon 關(guān)閉指定的文件夾圖標(biāo)的一個(gè)分支節(jié)點(diǎn)。
folderOpenIcon 指定打開(kāi)的文件夾圖標(biāo)的一個(gè)分支節(jié)點(diǎn)。
例:三角圖標(biāo)修改如下代碼使用即可換成自己的了:
disclosureOpenIcon:Embed(source='resource/region.png');
disclosureClosedIcon:Embed(source='resource/region.png');
*/
}
</fx:Style>
方法二:根據(jù)結(jié)點(diǎn)的屬性,靈活改變圖標(biāo)
<?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>
<!-- 將非可視元素(例如服務(wù)、值對(duì)象)放在此處 -->
<fx:XML id="treeData">
<root>
<node label="CI配置項(xiàng)" iconName="computer.png">
<node label="資源" iconName="computer.png">
<node label="硬件資源" iconName="computer.png">
<node label="硬件設(shè)備" 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);
}
//通過(guò)覆蓋data方法來(lái)動(dòng)態(tài)設(shè)置tree的節(jié)點(diǎn)圖標(biāo)
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;
}
}
//隱藏原有圖標(biāo),并設(shè)置它的坐標(biāo)
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;
}
}
}
復(fù)制代碼 代碼如下:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Tree{
/*去掉默認(rèn)文件夾圖標(biāo)*/
folderClosedIcon: Embed(source='resource/region.png');
folderOpenIcon: Embed(source='resource/region.png');
/*去掉葉子節(jié)點(diǎn)圖標(biāo)
defaultLeafIcon: ClassReference(null);
*/
/*
defaultLeafIcon 指定葉圖標(biāo)
disclosureClosedIcon 指定的圖標(biāo)旁邊顯示一個(gè)封閉的分支節(jié)點(diǎn)。默認(rèn)的圖標(biāo)是一個(gè)黑色三角形。
disclosureOpenIcon 指定的圖標(biāo)旁邊顯示一個(gè)開(kāi)放的分支節(jié)點(diǎn)。默認(rèn)的圖標(biāo)是一個(gè)黑色三角形。
folderClosedIcon 關(guān)閉指定的文件夾圖標(biāo)的一個(gè)分支節(jié)點(diǎn)。
folderOpenIcon 指定打開(kāi)的文件夾圖標(biāo)的一個(gè)分支節(jié)點(diǎn)。
例:三角圖標(biāo)修改如下代碼使用即可換成自己的了:
disclosureOpenIcon:Embed(source='resource/region.png');
disclosureClosedIcon:Embed(source='resource/region.png');
*/
}
</fx:Style>
方法二:根據(jù)結(jié)點(diǎn)的屬性,靈活改變圖標(biāo)
復(fù)制代碼 代碼如下:
<?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>
<!-- 將非可視元素(例如服務(wù)、值對(duì)象)放在此處 -->
<fx:XML id="treeData">
<root>
<node label="CI配置項(xiàng)" iconName="computer.png">
<node label="資源" iconName="computer.png">
<node label="硬件資源" iconName="computer.png">
<node label="硬件設(shè)備" 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);
}
//通過(guò)覆蓋data方法來(lái)動(dòng)態(tài)設(shè)置tree的節(jié)點(diǎn)圖標(biāo)
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;
}
}
//隱藏原有圖標(biāo),并設(shè)置它的坐標(biāo)
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;
}
}
}
相關(guān)文章
FLEX給頁(yè)面添加滾動(dòng)條實(shí)現(xiàn)思路及代碼
給頁(yè)面添加滾動(dòng)條的方法有很多,使用js獲取瀏覽器窗口的寬高,根據(jù)瀏覽器窗口寬高修改樣式,讓滾動(dòng)條出現(xiàn),具體的實(shí)現(xiàn)如下,需要的朋友可以參考下2013-11-11
Flex字體加粗問(wèn)題只能對(duì)英文的字體加粗
在flex中對(duì)label進(jìn)行字體加粗的時(shí)候,只能對(duì)英文的字體加粗,而中文的就不可以加粗,解決方法如下,希望對(duì)大家有所幫助2014-01-01
flex通過(guò)java后臺(tái)獲取ip和pcname示例代碼
這篇文章主要介紹了flex通過(guò)java后臺(tái)獲取ip和pcname的具體實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
Flex Label控件豎排顯示文字的實(shí)現(xiàn)代碼
Label控件豎排顯示文字一般都是橫排的,接下來(lái)為大家分享個(gè)方法讓它變成豎排,感興趣的童鞋們可以學(xué)習(xí)下,希望對(duì)你有所幫助2013-04-04
在as中監(jiān)聽(tīng)自定義事件并處理事件的實(shí)例代碼
點(diǎn)擊一張圖片,響應(yīng)事件。必須在AS中,去監(jiān)聽(tīng)事件,并處理事件,下面是具體的實(shí)現(xiàn)思路及功能代碼,感興趣的朋友可以參考下哈2013-06-06

