转载 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",
?????{ "name":"Xuhui","selected":false }
????]},
????{ "name":"Beijing","children":[
?????{ "name":"Haiding",
?????{ "name":"Zhaoyang",
?????{ "name":"Fengtan","selected":false }
????]}
???]);
???
??]]>
?</mx:Script>
?<mx:Tree width="300" height="500" labelField="name"
itemRenderer="com.montage.controls.treeClasses.TreeCheckBoxRenderer" dataProvider="{collection}"/>
</mx:Application>
?
?
下面是效果：
