自定义tree节点图标

//测试文件:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">

 <mx:XMLList id="treeData">
  <item label="test1"
     icon="assets/Cflocation.gif">
   <item label="test11"
      icon="assets/editor_bak.gif"/>
   <item label="test12"
      icon="assets/edittsk_tsk1.gif">
   </item>
   <item label="test13"
      icon="assets/Cflocation.gif">
   </item>
  </item>
  <item label="test2"
     icon="assets/edittsk_tsk1.gif">
   <item label="test21"
      icon="assets/editor_bak.gif">
   </item>
  </item>
  <item label="test3"
     icon="assets/EraserTool.gif">
  </item>
  <item label="test4"
     icon="assets/FillTool.gif">
  </item>
  <item label="test5"
     icon="assets/Cflocation.gif">
  </item>
  <item label="test6"
     icon="assets/FillTool.gif">
  </item>
 </mx:XMLList>
 <mx:Tree id="myTree"
    width="50%"
    height="100%"
    labelField="@label"
    showRoot="false"
    dataProvider="{treeData}"
    itemRenderer="IconItemRender"/>

</mx:Application>

 

//IconItemRender.as

package {
 import flash.display.DisplayObject;
 
 import mx.collections.*;
 import mx.controls.Image;
 import mx.controls.treeClasses.*;
 public class IconItemRender extends TreeItemRenderer {
  //Create a new image component
  private var img:Image = new Image();
  public function IconItemRender() {
   super();
   //Add the image to the renderer
   this.addChild(this.img as DisplayObject);
  }
  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
   super.updateDisplayList(unscaledWidth, unscaledHeight);
   //The renderer is called multiple times, sometimes the ''data' property is unavailable, so check if it has data.
   if(data!=null) {
    this.label.text = data.@label;
    //Because my icons are a bit bigger than the original icons, I have to move the label a bit.
    this.label.x += 5;
    //this.getChildAt(3) is the original icon, so I set my new image right on top of the original
    this.img.x = this.getChildAt(3).x;
    this.img.y = this.getChildAt(3).y - 5;
    this.img.width = 20;
    this.img.height = 20;
    //Set the source of the new image
    this.img.source = data.@icon;
    //Hide the original icon
    this.getChildAt(3).visible = false;
   }
  }
 }

}

效果如下: