Flex在Tree控件上添加CheckBox

转载 http://summerofthatyear-gmail-com.javaeye.com/blog/326302
      网上遇到很多需要在Tree控件添加CheckBox等控件的问题, 本以为把Tree的itemRenderer设置成mx.controls.CheckBox 就可以完事了, 但是试了之后才发现没有这么简单 . . .
      今天看了Tree的源码, Tree在初始化的时候默认给自己设置itemRenderer属性. 此属性值也是Flex现成的:mx.controls.treeClasses.TreeItemRenderer.
      它内部分为三部分:1,icon也是就三角形的小图标. 2,disclosureIcon文件夹图标. 3,label显示的文字. 我只要在label前面加上一个CheckBox就行了.
       于是我写了一个类:TreeCheckBoxRenderer继承mx.controls.treeClasses.TreeItemRenderer源码如下:

 

package com.montage.controls.treeClasses
{
import flash.events.Event;

import mx.controls.CheckBox;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;

/**
 * 支持CheckBox的TreeItemRenderer
 * @author Montage
 */ 
public class TreeCheckBoxRenderer extends TreeItemRenderer
{
 public function TreeCheckBoxRenderer()
 {
  super();
 }
 
 /**
  * 表示CheckBox控件从data中所取数据的字段
  */  
 private var _selectedField:String = "selected";
 
 protected var checkBox:CheckBox;
 
 /**
  * 构建CheckBox
  */  
 override protected function createChildren():void
 {
  super.createChildren();
  checkBox = new CheckBox();
  addChild( checkBox );
  checkBox.addEventListener(Event.CHANGE, changeHandler);
 }
 
 /**
  * 点击checkbox时,更新dataProvider
  * @param event
  */  
 protected function changeHandler( event:Event ):void
 {
  if( data && data[_selectedField] != undefined )
  {
   data[_selectedField] = checkBox.selected;
  }
 }
 
 /**
  * 初始化控件时, 给checkbox赋值
  */  
 override protected function commitProperties():void
 {
  super.commitProperties();
  trace(data[_selectedField])
  if( data && data[_selectedField] != undefined )
  {
   checkBox.selected = data[_selectedField];
  }
  else
  {
   checkBox.selected = false;
  }
 }
 
 /**
  * 重置itemRenderer的宽度
  */  
 override protected function measure():void
 {
  super.measure();
  measuredWidth += checkBox.getExplicitOrMeasuredWidth();
 }
 
 /**
  * 重新排列位置, 将label后移
  * @param unscaledWidth
  * @param unscaledHeight
  */  
 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
 {
  super.updateDisplayList(unscaledWidth, unscaledHeight);
  var startx:Number = data ? TreeListData( listData ).indent : 0;
  
  if (disclosureIcon)
  {
   disclosureIcon.x = startx;

   startx = disclosureIcon.x + disclosureIcon.width;
   
   disclosureIcon.setActualSize(disclosureIcon.width,
           disclosureIcon.height);
   
   disclosureIcon.visible = data ?
          TreeListData( listData ).hasChildren :
          false;
  }
  
  if (icon)
  {
   icon.x = startx;
   startx = icon.x + icon.measuredWidth;
   icon.setActualSize(icon.measuredWidth, icon.measuredHeight);
  }
  
  checkBox.move(startx, ( unscaledHeight - checkBox.height ) / 2 );
  
  label.x = startx + checkBox.getExplicitOrMeasuredWidth();
 }
}
}

 

 

 

测试文件如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   
   [Bindable]
   public var collection:ArrayCollection = new ArrayCollection([
    { "name":"Shahai", "selected":false, "children":[
     { "name":"Huangpu", "selected":false },
     { "name":"Pudong", "selected":true },
     { "name":"Jing'an", "selected":false },
     { "name":"Xuhui", "selected":false }
    ]},
    { "name":"Beijing", "selected":false, "children":[
     { "name":"Haiding", "selected":false },
     { "name":"Zhaoyang", "selected":true },
     { "name":"Fengtan", "selected":false }
    ]}
   ]);

   
  ]]>
 </mx:Script>
 <mx:Tree width="300" height="500" labelField="name"
itemRenderer="com.montage.controls.treeClasses.TreeCheckBoxRenderer" dataProvider="{collection}"/>
</mx:Application>

 

 

下面是效果：