FlexTree控件 每个节点设置不同的icon
网上很多人在问,Flex中Tree控件怎样设置每个节点不同的icon。
可能我的方法不是最好的,但是作为一个解决方法共享给大家。
其实,解决方法非常简单,就是根据节点的类型,通过递归函数给每个节点设置不同的icon
下面是我自己写的一个组件
<?xml version="1.0" encoding="utf-8"?>
<mx:Tree xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.IViewCursor;
import mx.collections.XMLListCollection;
import mx.controls.treeClasses.ITreeDataDescriptor;
import mx.events.FlexEvent;
[Embed('asset/images/icon/peer_online.png')]
private var peerOnline:Class;
[Embed('asset/images/icon/peer_offline.png')]
private var peerOffline:Class;
[Embed('asset/images/icon/database.png')]
private var database:Class;
[Embed('asset/images/icon/folder.png')]
private var fileDir:Class;
[Embed('asset/images/icon/folder_link.png')]
private var ftp:Class;
[Embed('asset/images/icon/application.png')]
private var msg:Class;
[Embed('asset/images/icon/email.png')]
private var excel:Class;
[Embed('asset/images/icon/tab.png')]
private var text:Class;
[Embed('asset/images/icon/wand.png')]
private var triger:Class;
[Embed('asset/images/icon/script.png')]
private var procedure:Class;
[Embed('asset/images/icon/text_allcaps.png')]
private var oracle815:Class;
[Embed('asset/images/icon/text_bold.png')]
private var oracle817:Class;
[Embed('asset/images/icon/text_columns.png')]
private var oracle9:Class;
[Embed('asset/images/icon/text_dropcaps.png')]
private var oracle10:Class;
[Embed('asset/images/icon/text_heading_1.png')]
private var mssql:Class;
[Embed('asset/images/icon/text_heading_2.png')]
private var mascc:Class;
[Embed('asset/images/icon/text_heading_3.png')]
private var db71:Class;
[Embed('asset/images/icon/text_heading_4.png')]
private var mysql4018:Class;
[Embed('asset/images/icon/text_heading_5.png')]
private var mysql5x:Class;
[Embed('asset/images/icon/text_heading_6.png')]
private var informax73:Class;
[Embed('asset/images/icon/text_horizontalrule.png')]
private var sybase:Class;
[Embed('asset/images/icon/text_horizontalrule.png')]
private var databaseTable:Class;
[Embed('asset/images/icon/text_heading_6.png')]
private var databaseView:Class;
public function resetIcon():void{
if((this.dataProvider as XMLListCollection) != null){
var testXml:XMLList = (this.dataProvider as XMLListCollection).source;
for(var i:Number = 0;i<testXml.child(XmlNodeConst.NODE_PEER).length();i++){
var peerItem:XML = testXml.child(XmlNodeConst.NODE_PEER)[i];
if(peerItem.children().length()==0){
this.setItemIcon(peerItem,peerOffline,peerOffline);
}else{
this.setItemIcon(peerItem,peerOnline,peerOnline);
}
traversalNode(peerItem);
}
}
}
private function traversalNode(nodeXml:XML):void{
var nodeType:String;
for(var j:Number = 0;j<nodeXml.children().length();j++){
var nodeItem:XML = nodeXml.children()[j];
nodeType = nodeItem.@type;
setNodeIcon(nodeType,nodeItem);
traversalNode(nodeItem);
}
}
public function setNodeIcon(nodeType:String,nodeItem:XML):void{
if(nodeType==XmlNodeConst.GROUP_DATABASE){
this.setItemIcon(nodeItem,database,database);
}else if(nodeType==XmlNodeConst.GROUP_FILE_DIR){
this.setItemIcon(nodeItem,fileDir,fileDir);
}else if(nodeType==XmlNodeConst.GROUP_FTP){
this.setItemIcon(nodeItem,ftp,ftp);
}else if(nodeType==XmlNodeConst.GROUP_MSG){
this.setItemIcon(nodeItem,msg,msg);
}else if(nodeType==XmlNodeConst.EXCEL){
this.setItemIcon(nodeItem,excel,excel);
}else if(nodeType==XmlNodeConst.GROUP_TXT){
this.setItemIcon(nodeItem,text,text);
}else if(nodeType==XmlNodeConst.GROUP_TRIGGER){
this.setItemIcon(nodeItem,triger,triger);
}else if(nodeType==XmlNodeConst.GROUP_STORED_PROCEDURE){
this.setItemIcon(nodeItem,procedure,procedure);
}else if(nodeType==XmlNodeConst.DATABASE_ORCLE_815){
this.setItemIcon(nodeItem,oracle815,oracle815);
}else if(nodeType==XmlNodeConst.DATABASE_ORCLE_817){
this.setItemIcon(nodeItem,oracle817,oracle817);
}else if(nodeType==XmlNodeConst.DATABASE_ORCLE_9){
this.setItemIcon(nodeItem,oracle9,oracle9);
}else if(nodeType==XmlNodeConst.DATABASE_ORCLE_10){
this.setItemIcon(nodeItem,oracle10,oracle10);
}else if(nodeType==XmlNodeConst.DATABASE_MSSQL){
this.setItemIcon(nodeItem,mssql,mssql);
}else if(nodeType==XmlNodeConst.DATABASE_MSACCESS2K){
this.setItemIcon(nodeItem,mascc,mascc);
}else if(nodeType==XmlNodeConst.DATABASE_DB2_71){
this.setItemIcon(nodeItem,db71,db71);
}else if(nodeType==XmlNodeConst.DATABASE_MYSQL_4_0_18){
this.setItemIcon(nodeItem,mysql4018,mysql4018);
}else if(nodeType==XmlNodeConst.DATABASE_MYSQL_5X){
this.setItemIcon(nodeItem,mysql5x,mysql5x);
}else if(nodeType==XmlNodeConst.DATABASE_INFORMIX_73){
this.setItemIcon(nodeItem,informax73,informax73);
}else if(nodeType==XmlNodeConst.DATABASE_SYBASE){
this.setItemIcon(nodeItem,sybase,sybase);
}else if(nodeType==XmlNodeConst.DATABASE_TABLE){
this.setItemIcon(nodeItem,databaseTable,databaseTable);
}else if(nodeType==XmlNodeConst.DATABASE_VIEW){
this.setItemIcon(nodeItem,databaseView,databaseView);
}
}
]]>
</fx:Script>
</mx:Tree>