参考了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>
视图:
已经解决组件在节点打开关闭的时候还会出现加载停顿,代码如下
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);
}
}
}
}