转至：http://blog.csdn.net/superherosk123/article/details/4692960
Flex提供的Tree,每项有可闭合图标,图标,标签组合而成
现在需要在可闭合图标,图标之间 加入一个 checkbox,
Tree的渲染效果靠渲染器来完成. 自定义的Tree项目渲染器必须继承TreeItemRenderer
这次的渲染器就3个功能,
1. createChildren() 时,为Tree的每项生成一个 Checkbox
2. updateDisplayList()时,重新排列Tree的每项项目的位置
3. checkbox点击时,更新Tree的dataProvider中对于的xml数据,加入selected='true'...
代码如下:
包结构 org.sk.renderer
package org.sk.renderer
{
import flash.events.Event;
import mx.controls.CheckBox;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
import org.sk.events.TreeDataEvent;
/*
* 有 选择框 的 TreeRenderer,设定Tree的itemRenderer = 'org.sk.renderer.CheckTreeRenderer'
* Tree操作完毕后,会向Tree的dataProvider添加selected属性:selected='true' 选择框被选中,或selected='false'为选中
* Tree 的每一行由3组件构成, 1:disclosureIcon,2:icon,3:label
*/
public class CheckTreeRenderer extends TreeItemRenderer
{
protected var check:CheckBox;
public static var arr:Array=[];
public function CheckTreeRenderer()
{
super();
}
//创建子时, 加入 checkbox
override protected function createChildren():void
{
super.createChildren();
check=new CheckBox();
addChild(check);
check.addEventListener(Event.CHANGE, changeHandler);
//selected 为true
if(data && data.@selected){
check.selected = true;
}
/**
* 改变选择框的状态时,更新dataProvider
* */
function changeHandler(e:Event):void
{
if (data)
{
check.selectedField=check.selected.toString();
var xml:XML=data as XML;
if (xml)
xml.@selected=check.selected;
}
}
}
/*更新显示列表,重排4 组件的位置*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var startX:Number=data ? (listData as TreeListData).indent : 0;
//1 开关图标
if (disclosureIcon)
{
disclosureIcon.x=startX;
startX=disclosureIcon.x + disclosureIcon.measuredWidth;
}
//2 选择框
check.move(startX, (unscaledHeight - check.height) / 2);
startX += check.measuredWidth;
//3 图标
if (icon)
{
icon.move(startX,icon.y);
startX += icon.measuredWidth;
}
//4 标签
label.x = startX;
}
/**
* 当放入数据时,更新选择框的状态.
* */
override public function set data(value:Object) : void{
super.data = value;
if(data != null){
check.selected = data.@selected =="true"?true:false;
}
}
}
}
Flex中使用的例子:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:controls="org.sk.controls.*"
>
<mx:Panel x="98" y="71" title="Tree" width="243" height="243">
<mx:Tree id="tree" dataProvider="{xml}" showRoot="false" width="100%" height="100%" x="0" y="0"
labelField="@label"
itemRenderer="org.sk.renderer.CheckTreeRenderer"
/>
<mx:ControlBar >
<mx:Button click="button1_clickHandler(event)"/>
</mx:ControlBar>
</mx:Panel>
<mx:XML xmlns="" id="xml">
<items>
<item label="a" selected="true"/>
<item label="b" selected="false" />
<item label="c" selected="false" />
<item label="d" selected="false" />
<item label="a1" selected="true"/>
<item label="b1" selected="false" />
<item label="c1" selected="false" />
<item label="d1" selected="false" />
</items>
</mx:XML>
<mx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
trace(tree.dataProvider);
}
]]>
</mx:Script>
</mx:Application>