告示:本文为原创文章, 如果转载请注明出处!
http://summerofthatyear-gmail-com.iteye.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源码如下:
测试文件如下:
注意:selected属性很重要, 此属性在数据源内, 标致当前节点的CheckBox是否选中.点击CheckBox会自动改变响应的数据源. 如果想知道哪些被选中的话, 就遍历Tree的dataProvider吧~
谨以此文贡献给战斗在RIA第一线的兄弟姐妹们.
网上遇到很多需要在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源码如下:
- {
- 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();
- }
- }
- }
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();
}
}
}
测试文件如下:
- <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>
<?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>
注意:selected属性很重要, 此属性在数据源内, 标致当前节点的CheckBox是否选中.点击CheckBox会自动改变响应的数据源. 如果想知道哪些被选中的话, 就遍历Tree的dataProvider吧~
谨以此文贡献给战斗在RIA第一线的兄弟姐妹们.