package cn.actionscript
{
import flash.events.MouseEvent;
import flash.events.Event;
import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.controls.Tree;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
/**
* 支持CheckBox的TreeItemRenderer
* @author wgy
*/
public class TreeCheckBoxRenderer extends TreeItemRenderer
{
public function TreeCheckBoxRenderer()
{
super();
}
/**
* 表示CheckBox控件从data中所取数据的字段
*/
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(null==data){
return ;
}
if( data.@state== "checked")
{
data.@state= "unchecked";
return ;
/**
* 如果有需要，在这里处理选中父，全选子节点的方法(这个方式暂时去掉，如果有需要去掉注释即可)。
* */
// for (var i:int=0;i<data.children().length();i++)
// {
// data.children()[i].@selected=checkBox.selected.toString();;
//
// }
}
data.@state= "checked";
}
/**
* 初始化控件时, 给checkbox赋值
*/
override protected function commitProperties():void
{
super.commitProperties();
if(null==data){
return;
}
if(data.@state!="" )
{
if(data.@state=="checked"){
checkBox.selected=true;
}else{
checkBox.selected=false;
}
}
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();
}
}
}mxml文件内容
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:services="services.*"
xmlns:compoent="cn.ccb.yn.acms.compoent.*"
minWidth="955" minHeight="600" creationComplete="initData()">
<fx:Declarations>
<s:CallResponder id="queryBranchResult" result="queryBranchResult_resultHandler(event)"/>
<services:UserUccImpl id="userUccImpl"
fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
showBusyCursor="true"/>
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Tree{
/*去掉默认文件夹图标*/
folderClosedIcon: ClassReference(null);
folderOpenIcon: ClassReference(null);
/*去掉叶子节点图标*/
defaultLeafIcon: ClassReference(null);
/*
defaultLeafIcon 指定叶图标
disclosureClosedIcon 指定的图标旁边显示一个封闭的分支节点。默认的图标是一个黑色三角形。
disclosureOpenIcon 指定的图标旁边显示一个开放的分支节点。默认的图标是一个黑色三角形。
folderClosedIcon 关闭指定的文件夹图标的一个分支节点。
folderOpenIcon 指定打开的文件夹图标的一个分支节点。
例：三角图标修改如下代码使用即可换成自己的了：
disclosureOpenIcon:Embed(source='images/a.png');
disclosureClosedIcon:Embed(source='images/b.png');
*/
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
[Bindable]
public var xmlBank:String;
[Bindable]
public var str:XMLList;
private function treeChangeHandle(event:Event):void{
var selectedTreeNode:XML;
selectedTreeNode=Tree(event.target).selectedItem as XML;
}
public function initData():void{
queryBranchResult.token = userUccImpl.queryBranch("wgy.yn");
}
private function test():void{
txtAr.text=getSelectedChild(str);
}
private function getSelectedChild(xml:XMLList):String{
var result:String="";
for(var i:int=0;i<xml.children().length();i++){
if((xml.children()[i].@state=="checked")){
result+=xml.children()[i].@label+"\n";
}
var oxml:XMLList=new XMLList(xml.children()[i].toString());
if(oxml.children().length()>0){
result+=getSelectedChild(oxml);
}
}
return result;
}
protected function queryBranchResult_resultHandler(event:ResultEvent):void
{
xmlBank = event.result.toString();
str=new XMLList(xmlBank);
var x:XMLList=str..menuitem as XMLList;
tree.dataProvider=x;
}
]]>
</fx:Script>
<s:Panel x="28" y="20" width="250" height="412" title="所有学生">
<mx:Tree id="tree" top="0" left="0" width="100%" height="100%" labelField="@label"
itemRenderer="cn.ccb.yn.acms.actionscript.TreeCheckBoxRenderer"
change="treeChangeHandle(event)" styleName="Tree">
</mx:Tree>
</s:Panel>
<s:Panel x="286" y="20" width="250" height="412" title="选中的学生">
<s:TextArea id="txtAr" top="0" left="0" width="100%" height="100%"/>
</s:Panel>
<s:Button x="28" y="454" label="添加选中" click="test()"/>
<compoent:TreeBank x="570" y="10">
</compoent:TreeBank>
</s:Application>
