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>

下面是效果：