可以动态设置不同图标的树形组件

最新推荐文章于 2024-09-14 09:30:00 发布

iteye_8019

最新推荐文章于 2024-09-14 09:30:00 发布

阅读量141

点赞数

分类专栏： Flex Component 文章标签： Flash .net XML

本文链接：https://blog.csdn.net/iteye_8019/article/details/81956966

版权

Flex Component 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

参考了IconUtility组件和网上的一些代码实现，综合了一下
组件代码：


package pizazz.flex4.component.renderer.icontree{
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.events.Event;
	import flash.geom.Matrix;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import mx.controls.Tree;
	import mx.controls.treeClasses.TreeItemRenderer;
	import mx.core.BitmapAsset;

	public class TreeIconItem extends TreeItemRenderer{
		private const _icon:BitmapAsset = new BitmapAsset();

		public function TreeIconItem(){}

		override protected function commitProperties():void{
			super.commitProperties();
			if(data && data[(owner as Tree).iconField] != "") {
				_icon.bitmapData = new BitmapData(data["iconWidth"] || 16, 
					data["iconHeight"] || 16, true, 0x00FFFFFF);
				var _loader:Loader = new Loader();
				_loader.load(new URLRequest(data[(owner as Tree).iconField]), 
					new LoaderContext(true));
				if(!_loader.content){
					_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, 
						completeHandler, false, 0, true);
				}else{
					displayLoader(_loader);
				}
			}
		}

		private function displayLoader(loader:Loader):void {
			if(!_icon.bitmapData) {
				_icon.bitmapData = new BitmapData(loader.content.width, 
					loader.content.height, true, 0x00FFFFFF);
			}
			_icon.bitmapData.draw(loader, new Matrix(_icon.bitmapData.width / 
				loader.width, 0, 0, _icon.bitmapData.height / 
				loader.height, 0, 0));
			icon = _icon;
			addChild(DisplayObject(icon));
			/** 1.
			var component:UIComponent = parent as UIComponent;
			component.invalidateSize();
			 */
			/** 2.*/
			invalidateDisplayList();
			/** */
		}

		private function completeHandler(event:Event):void {
			if(event && event.target is LoaderInfo) {
				displayLoader(event.target.loader as Loader);
			}
		}
	}
}


package pizazz.flex4.component{
	import mx.controls.Tree;
	import mx.core.ClassFactory;
	import pizazz.flex4.component.renderer.icontree.TreeIconItem;

	public class IconTree extends Tree{
		public function IconTree(){
			super();
			itemRenderer = new ClassFactory(TreeIconItem);
		}

		override public function itemToIcon(item:Object):Class{
			return null;
		}
	}
}

组件执行：


<?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" 
			   xmlns:component="pizazz.flex4.component.*"
			   minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			private const _arr:Array = [
				{"id": "aa", "label": "主菜单一", 
					"icon": "pizazz/flex4/assets/image/pic_folder.png", 
					"children": [
					{"id": "aa", "label": "子菜单一", 
						"icon": "pizazz/flex4/assets/image/pic_help.png"},
					{"id": "aa", "label": "子菜单二", 
						"icon": "pizazz/flex4/assets/image/pic_options.png"}
				]},
				{"id": "ba", "label": "主菜单二", 
					"icon": "pizazz/flex4/assets/image/pic_folder.png"}
			];
		]]>
	</fx:Script>
	<component:IconTree dataProvider="{_arr}" width="320" height="240" />
</s:Application>

视图：
[img]http://dl.iteye.com/upload/attachment/339275/e628ce8c-3bcb-3035-853f-eb6c17facb7b.png[/img]
已经解决组件在节点打开关闭的时候还会出现加载停顿，代码如下


package pizazz.flex4.component.renderer.icontree{
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.events.Event;
	import flash.geom.Matrix;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.utils.Dictionary;
	import mx.controls.Tree;
	import mx.controls.treeClasses.TreeItemRenderer;
	import mx.core.BitmapAsset;
	import mx.core.UIComponent;
	import mx.utils.ObjectUtil;

	public class TreeIconItem extends TreeItemRenderer{
		private var _icon:BitmapAsset = new BitmapAsset();
		private static const _icons:Dictionary = new Dictionary();

		public function TreeIconItem(){}

		override protected function commitProperties():void{
			super.commitProperties();
			var _tmp:String = data[(owner as Tree).iconField];
			if(data && _tmp != "") {
				if (icon){
					removeChild(DisplayObject(icon));
					icon = null;
				}
				if(_icons[_tmp]){
					_icon.bitmapData = _icons[_tmp];
				}else{
					_icon.bitmapData = new BitmapData(16, 16, true, 0x00FFFFFF);
					_icons[_tmp] = _icon.bitmapData;
					var _loader:Loader = new Loader();
					_loader.load(new URLRequest(data[(owner as Tree).iconField]), 
						new LoaderContext(true));
					if(!_loader.content){
						_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, 
							completeHandler, false, 0, true);
					}else{
						displayLoader(_loader);
					}
				}
				icon = _icon;
				addChild(DisplayObject(icon));
			}
		}

		private function displayLoader(loader:Loader):void {
			if(!_icon.bitmapData) {
				_icon.bitmapData = new BitmapData(loader.content.width, 
					loader.content.height, true, 0x00FFFFFF);
			}
			_icon.bitmapData.draw(loader, new Matrix(_icon.bitmapData.width / 
				loader.width, 0, 0, _icon.bitmapData.height / 
				loader.height, 0, 0));
			(parent as UIComponent).invalidateSize();
		}

		private function completeHandler(event:Event):void {
			if(event && event.target is LoaderInfo) {
				displayLoader(event.target.loader as Loader);
			}
		}
	}
}