可级联选择tree中的checkBox (flex)

在包common.control.tree下创建类TreeCheckBoxRender，其中关键的是tree组建的invalidateList()，实现Tree的自动刷新.在checkbox的事件响应下，递归其子节点就可以修改自己的selected的值（其中data的该checkbox对象的一个抽象，或者说是一个引用），然后分发事件，由tree的invalidateList（）实现，级联选择。

 

 

 package common.control.tree { import flash.events.Event; import flash.events.MouseEvent; import mx.controls.Alert; import mx.controls.CheckBox; import mx.controls.Tree; import mx.controls.treeClasses.TreeItemRenderer; import mx.controls.treeClasses.TreeListData; import mx.events.TreeEvent; /** * 支持CheckBox的TreeItemRenderer * @author Montage * @modify chenzhimin */ public class TreeCheckBoxRender extends TreeItemRenderer { public function TreeCheckBoxRender() { 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.addEventListener(MouseEvent.CLICK,updateCheck); } protected function updateCheck(e:Event):void{ var b:Boolean=this.dispatchEvent(new Event("updateTreeEvent",true)); } /** * 点击checkbox时,更新dataProvider * @param event */ protected function changeHandler( event:Event =null):void { if( data && data[_selectedField] != undefined ) { data[_selectedField] = checkBox.selected; } if(data.hasOwnProperty("children")){ var arr:Array=data["children"]; for(var i:int;i<arr.length;i++){ var obj:Object=arr[i]; obj[_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(); } } }

 

 

 

下面是测试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" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.events.FlexEvent; [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 } ]} ]); protected function application1_creationCompleteHandler(event:FlexEvent):void { // TODO Auto-generated method stub this.addEventListener("updateTreeEvent",function():void{ trList.invalidateList(); }); } private function iconFunction(item:Object):*{ if(!item.children){ }else{ if(trList.isItemOpen(item)){ return trList.getStyle("folderOpenIcon"); }else{ return trList.getStyle("folderClosedIcon"); } } } ]]--> </fx:Script> <mx:Tree id="trList" x="174" y="81" labelField="name" width="281" height="218" itemRenderer="common.control.tree.TreeCheckBoxRender" dataProvider="{collection}" iconFunction="iconFunction"></mx:Tree> </s:Application>