[Flex] 组件Tree系列 —— 支持CheckBox组件
主程序mxml：
1 <?xml version="1.0" encoding="utf-8"?> 2 3 <!--功能描述：支持CheckBox--> 4 5 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 6 xmlns:s="library://ns.adobe.com/flex/spark" 7 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 8 <fx:Declarations> 9 10 11 </fx:Declarations> 12 <fx:Style> 13 @namespace s "library://ns.adobe.com/flex/spark"; 14 @namespace mx "library://ns.adobe.com/flex/mx"; 15 mx|Tree{ 16 /*去掉默认文件夹图标*/ 17 folderClosedIcon: ClassReference(null); 18 folderOpenIcon: ClassReference(null); 19 20 /*去掉叶子节点图标*/ 21 defaultLeafIcon: ClassReference(null); 22 23 /* 24 defaultLeafIcon 指定叶图标 25 disclosureClosedIcon 指定的图标旁边显示一个封闭的分支节点。默认的图标是一个黑色三角形。 26 disclosureOpenIcon 指定的图标旁边显示一个开放的分支节点。默认的图标是一个黑色三角形。 27 folderClosedIcon 关闭指定的文件夹图标的一个分支节点。 28 folderOpenIcon 指定打开的文件夹图标的一个分支节点。 29 例：三角图标修改如下代码使用即可换成自己的了： 30 disclosureOpenIcon:Embed(source='images/a.png'); 31 disclosureClosedIcon:Embed(source='images/b.png'); 32 */ 33 } 34 35 </fx:Style> 36 37 <fx:Script> 38 <![CDATA[ 39 import com.render.TreeRightClickManager; 40 41 import mx.controls.Alert; 42 private var rightClickRegisted:Boolean; 43 44 [Bindable] 45 private var data:XML= 46 <data> 47 <actor label="周星驰" level="0" selected="false"> 48 <year label="1988" level="1" selected="false"> 49 <item label="《霹雳先锋》香港票房8916612 " level="2" selected="false"/> 50 <item label="《捕风汉子》香港票房3149395 " level="2" selected="false"/> 51 <item label="《最佳女婿》香港票房5807710 " level="2" selected="false"/> 52 </year> 53 <year label="1989" level="1" selected="false"> 54 <item label="《龙在天涯》香港票房6809853 " level="2" selected="false"/> 55 <item label="《义胆群英》香港票房7913329 " level="2" selected="false"/> 56 <item label="《流氓差婆》香港票房5624622 " level="2" selected="false"/> 57 <item label="《风雨同路》香港票房9335299 " level="2" selected="false"/> 58 </year> 59 <year label="1990" level="1" selected="false"> 60 <item label="《望夫成龙》香港票房13703364 " level="2" selected="false"/> 61 <item label="《咖喱辣椒》香港票房15777856 " level="2" selected="false"/> 62 <item label="《小偷阿星》香港票房7968106 " level="2" selected="false"/> 63 <item label="《师兄撞鬼》香港票房12128944 " level="2" selected="false"/> 64 <item label="《赌圣》香港票房41326156 " level="2" selected="false"/> 65 <item label="《无敌幸运星》香港票房18799869" level="2" selected="false"/> 66 <item label="《江湖最后一个大佬》香港票房5495811 " level="2" selected="false"/> 67 </year> 68 </actor> 69 70 <actor label="李连杰" level="0" selected="false"> 71 <year label="1992" level="1" selected="false"> 72 <item label="笑傲江湖之东方不败（1992）" level="2" selected="false"/> 73 <item label="黄飞鸿之二男儿当自强（1992） " level="2" selected="false"/> 74 <item label="黄飞鸿之三狮王争霸（1992） " level="2" selected="false"/> 75 </year> 76 <year label="1993" level="1" selected="false"> 77 <item label="方世玉Ⅱ万夫莫敌（1993） " level="2" selected="false"/> 78 <item label="倚天屠龙记之魔教教主（1993）" level="2" selected="false"/> 79 <item label="黄飞鸿之铁鸡斗蜈蚣（1993）" level="2" selected="false"/> 80 <item label="太极张三丰（1993）" level="2" selected="false"/> 81 </year> 82 <year label="1994" level="1" selected="false"> 83 <item label="新少林五祖（1994）" level="2" selected="false"/> 84 <item label="精武英雄（1994）" level="2" selected="false"/> 85 <item label="中南海保镖（1994）" level="2" selected="false"/> 86 <item label="给爸爸的信（1995)" level="2" selected="false"/> 87 </year> 88 <year label="1995" level="1" selected="false"> 89 <item label="鼠胆龙威（1995）" level="2" selected="false"/> 90 <item label="给爸爸的信（1995)" level="2" selected="false"/> 91 </year> 92 </actor> 93 </data> 94 ; 95 private function treeChangeHandle(event:Event):void{ 96 var selectedTreeNode:XML; 97 selectedTreeNode=Tree(event.target).selectedItem as XML; 98 } 99 100 private function getSelectedChild(xml:XML):String{ 101 var result:String=""; 102 for(var i:int=0;i<xml.children().length();i++){ 103 if((xml.children()[i].@selected=="true") && (xml.children()[i].@level=="2")){ 104 result+=xml.children()[i].@label+"\n"; 105 } 106 var temp:XML=new XML(xml.children()[i].toString()); 107 if(temp.children().length()>0){ 108 result+=getSelectedChild(temp); 109 } 110 } 111 return result; 112 } 113 114 protected function add_clickHandler(event:MouseEvent):void 115 { 116 txtAr.text=getSelectedChild(data); 117 } 118 119 ]]> 120 </fx:Script> 121 122 <s:Panel width="300" height="400" title="所有影片"> 123 <mx:Tree id="tree" top="0" left="0" width="100%" height="100%" labelField="@label" showRoot="false" 124 itemRenderer="com.render.TreeCheckBoxRenderer" dataProvider="{data}" 125 change="treeChangeHandle(event)" styleName="Tree"> 126 </mx:Tree> 127 </s:Panel> 128 <s:Panel x="310" width="300" height="400" title="选中的影片"> 129 <s:TextArea id="txtAr" top="0" left="0" width="100%" height="100%"/> 130 </s:Panel> 131 <s:Button y="410" label="添加选中" click="add_clickHandler(event)"/> 132 </s:Application>
com.render.TreeCheckBoxRenderer类：
package com.render { 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 spark.components.Button; /** * 支持CheckBox的TreeItemRenderer * @author * */ public class TreeCheckBoxRenderer extends TreeItemRenderer { public function TreeCheckBoxRenderer() { super(); } /** * 表示CheckBox控件从data中所取数据的字段 */ protected var checkBox:CheckBox; protected var button:Button; /** * 构建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.@selected!="" ){ data.@selected= checkBox.selected.toString(); for (var i:int=0;i<data.children().length();i++){ data.children()[i].@selected=checkBox.selected.toString();; } } } /** * 初始化控件时, 给checkbox赋值 */ override protected function commitProperties():void { super.commitProperties(); if(data.@selected!="" ){ //trace(data,"data"); if(data.@selected=="true"){ 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(); } } }