封装自己的Flex工具_Tree带checkbox渲染器

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>