Flex在Tree控件上添加CheckBox

[b]告示:本文为原创文章, 如果转载请注明出处![/b][url]http://summerofthatyear-gmail-com.iteye.com/blog/326302[/url]
网上遇到很多需要在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" : "上海", "selected":false, "children":[
{ "name":"黄浦", "selected":false },
{ "name":"浦东", "selected":true },
{ "name":"静安", "selected":false },
{ "name":"徐汇", "selected":false }
]},
{ "name":"北京", "selected":false, "children":[
{ "name":"海淀", "selected":false },
{ "name":"朝阳", "selected":true },
{ "name":"丰台", "selected":false }
]}
]);

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


[b]注意[/b]:selected属性很重要, 此属性在数据源内, 标致当前节点的CheckBox是否选中.点击CheckBox会自动改变响应的数据源. 如果想知道哪些被选中的话, 就遍历Tree的dataProvider吧~
谨以此文贡献给战斗在RIA第一线的兄弟姐妹们.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值