Flex4_tree component 2 (add multiple selection boxes and modify tree icons)

1. Create an as class to generate check boxes for the tree and select events.

Package COM. th. myutils {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;/*** support for treeitemrenderer * @ author montage */public class treecheckboxrenderer extends treeitemrenderer {public function treecheckbox Renderer () {super ();}/*** indicates the data field of the checkbox control from data */protected var checkbox: checkbox; /*** construct checkbox */override protected function createchildren (): void {super. createchildren (); checkbox = new checkbox (); addchild (checkbox); checkbox. addeventlistener (event. change, changehandler);}/*** update dataprovider * @ Param event */protected function changehandler (Event: Event): void {// Var I: Int = 0; If (data. @ selected! = "") {Data. @ selected = checkbox. Selected. tostring ();/*** if necessary, process the methods for selecting the parent node and Selecting All the child nodes. **/For (var I: Int = 0; I <data. children (). length (); I ++) {data. children () [I]. @ selected = checkbox. selected. tostring () ;}}}/*** assign a value to the checkbox */override protected function commitproperties (): void {super. commitproperties (); If (data. @ selected! = "") {If (data. @ selected = "true") {checkbox. selected = true;} else {checkbox. selected = false ;}} else {checkbox. selected = false ;}}/*** reset the width of itemrenderer */override protected function measure (): void {super. measure (); measuredwidth + = checkbox. getexplicitormeasuredwidth ();}/*** rearrange the location and move the label back * @ Param unscaledwidth * @ Param unscaledheight */override protected function updatedisplaylist (u Nscaledwidth: 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 ();}}}

2. Flex Page code

<? 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 "> <FX: declarations> </FX: declarations> <FX: style> @ namespace s" Library: // ns.adobe.com/flex/spark "; @ namespace MX" Library: // ns.adobe.com/flex/mx "; MX | tree {/* remove the default folder icon */folderclosedicon: classreference (null); folderopenicon: CL Assreference (null);/* remove the leaf node icon */defaultleaficon: classreference (null);/* ultleaficon specify the leaf icon disclosureclosedicon to display a closed branch node. The default icon is a black triangle. An open branch node is displayed next to the icon specified by disclosureopenicon. The default icon is a black triangle. Folderclosedicon disables a branch node of the specified folder icon. Folderopenicon specifies a branch node of the Open folder icon. For example, you can use the following code to change the triangle icon to your own one: disclosureopenicon: Embed (Source = 'images/a.png '); disclosureclosedicon: Embed (Source = 'images/B .png '); */} </FX: style> <FX: SCRIPT> <! [CDATA [import MX. controls. alert; [Bindable] private var studetxml: xml = <NJ label = "first-year" id = "N1" Lx = "0" selected = "false"> <BJ label = "Class 1" id = "B1" Lx = ""1" selected = "false"> <student label = "Liu Bei" id = "S1" Lx = "2" selected = "false"/> <student label = "Zhang Fei" id = "S2" Lx = "2" selected = "false"/> <student label = "Guan Yu" id = "S3" Lx = "2" selected = "false "/> <student label = "Zhuge Liang" id = "S4" Lx = "2" selected = "false"/> <student label = "mink Chan" id = "S5" Lx =" 2 "selected =" false "/> <student label =" LV Bu "id =" S6 "Lx =" 2 "selected =" false "/> </bj> </NJ >; private function treechangehandle (Event: Event): void {var selectedtreenode: XML; selectedtreenodemo-tree(event.tar get ). selecteditem as XML;} private function test (): void {txtar. TEXT = getselectedchild (studetxml);} private function getselectedchild (XML: XML): String {var result: String = ""; for (var I: Int = 0; I <XML. children (). length (); I ++) {If (XML. children () [I]. @ selected = "true") & (XML. children () [I]. @ Lx = "2") {result + = xml. children () [I]. @ label + "\ n";} var oxml: xml = New XML (XML. children () [I]. tostring (); If (oxml. children (). length ()> 0) {result + = getselectedchild (oxml) ;}} return result ;}]]> </FX: SCRIPT> <s: panel x = "28" Y = "20" width = "250" Height = "412" Title = "all students"> <mx: tree id = "Tree" Top = "0" Left = "0" width = "100%" Height = "100%" labelfield = "@ label" itemrenderer = "com. th. myutils. treecheckboxrenderer "dataprovider =" {studetxml} "change =" treechangehandle (event) "stylename =" Tree "> </MX: Tree> </S: Panel> <s: panel x = "286" Y = "20" width = "250" Height = "412" Title = "selected student"> <s: textarea id = "txtar" Top = "0" Left = "0" width = "100%" Height = "100%"/> </S: Panel> <s: button x = "28" Y = "454" label = "add selected" Click = "test ()"/> </S: Application>

3 ,: