Flex利用渲染器动态修改tree的icon图标

Tree:

<mx:Tree dataProvider="{datatree}" showRoot="false" labelField="name" itemRenderer="common.IconTreeRenderer" width="100%" height="100%"/>

数据源datatree:

{"resource": {"application": "PostgreSQL Database Server", "app_uid": "/zport/dmd/Processes/UserApp/Database/PostgreSQL Database Server", "permission_type": "local"}, "uid": "/zport/dmd/Processes/UserApp/Database/PostgreSQL Database Server", "sIconUrl": "/zport/dmd/Processes/process/ls_zport_dmd_Processes_UserApp_Database_PostgreSQL_Database_Server.ico", "bIconUrl": "/zport/dmd/Processes/process/lb_zport_dmd_Processes_UserApp_Database_PostgreSQL_Database_Server.ico", "children": [], "name": "PostgreSQL Database Server"}, {"resource": {"application": "MySQL Database Server", "app_uid": "/zport/dmd/Processes/UserApp/Database/MySQL Database Server", "permission_type": "local"}, "uid": "/zport/dmd/Processes/UserApp/Database/MySQL Database Server", "sIconUrl": "", "bIconUrl": "", "children": [], "name": "MySQL Database Server"}

TreeItemRenderer

读取JSON里配置的sIconUrl图标路径，然后加载到树上面，隐藏树本身的ICON图标。

package common
{
	import flash.xml.*;   
	
	import mx.collections.*;   
	import mx.controls.Alert;   
	import mx.controls.Image;   
	import mx.controls.listClasses.*;   
	import mx.controls.treeClasses.*;   
	
	/**
	 * 
	 * @author shilei, corporation YD
	 **/
	public class IconTreeRenderer extends TreeItemRenderer
	{
		[Embed(source="assets/devClass/app.png")]          //这是图片的相对地址
		[Bindable]
		public var app:Class;
		
		protected var myImage:Image;    
		private var imageWidth:Number = 16;   
		private var imageHeight:Number = 16;   
//		private static var defaultImg:String = "assets/devClass/app.png";  
		
		public function IconTreeRenderer()
		{
			super();
		}
		
		override protected function createChildren():void  
		{   
			super.createChildren();   
			myImage = new Image();   
			myImage.source = app;   //初始化设置默认图标
			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;
			if(!value || !myImage)return;
			
			var imageSource:String=value.sIconUrl;
			if(imageSource!="")   
			{   
				myImage.source='http://192.168.1.146:8080'+imageSource;   
			}else{   
				myImage.source=app;   
			}   
		}   
		//隐藏原有图标，并设置它的坐标   
		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;   
				}   
			}   
		}
	}
}

这个ItemRenderer用上之后,以后就可以直接根据JSON或XML的值自动更改图标而不用自己去遍历手动修改了,不过如果是本地图标最好用Embed绑定编译到程序里面，否则放到服务器会找不到图片，服务器存的图片可以直接用路径取:)

参考：http://blog.sina.com.cn/s/blog_51e82bab0100fy5e.html