论坛首页 Web前端技术论坛

动态修改Tree的icon图标

浏览 3402 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-06-02  
定义ICON渲染器
<mx:Tree id="nodesTree" width="100%" height="100%"
showRoot="false" labelField="@label" 
itemRenderer="common.IconTreeRenderer" />


<root label="A"> 
	<node label="模型" icon="a.png" > 
</root>


ICON Tree渲染器
读取XML里配置的icon图标路径,然后加载到树上面,隐藏树本身的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.*;
	/*
	 *  ICON Tree的渲染器
	 */
	public class IconTreeRenderer extends TreeItemRenderer
	{
		protected var myImage:Image; 
		private var imageWidth:Number = 16;
		private var imageHeight:Number = 16;
		private static var defaultImg:String = "leaf.png";

		public function IconTreeRenderer () 
		{
			super();
		}

		override protected function createChildren():void
		{
			super.createChildren();
			myImage = new Image();
			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.@icon;
			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;
				}
			}
		}
	}
}

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics