Flex custom tree with checkbox for data source using arraycollection (powerful and perfect version)

Custom components:

Package COM. anydata. consumer. renderers {import flash. events. event; import flash. events. mouseevent; import MX. collections. icollectionview; import MX. collections. ilist; import MX. collections. iviewcursor; import MX. controls. checkbox; import MX. controls. image; import MX. controls. tree; import MX. controls. treeclasses. itreedatadescriptor; import MX. controls. treeclasses. treeitemrenderer; import MX. controls. treeclasse S. treelistdata;/*** support for treeitemrenderer * @ author montage */public class extends treeitemrenderer {public function treecheckboxrenderer () {super ();} protected var myimage: image; private var imagewidth: Number = 12; private var imageheight: Number = 12; // set image properties private var inner: String = "@ embed (Source = 'Assets/inner.png ') "; protected var checkbox: checkbox ;/** * Indicates the data field */private VaR _ selectedfield: String = "selected" in the checkbox control from data;/*** when you click checkbox, update dataprovider * @ Param event */protected function changehandler (Event: Event): void {If (Data & Data [_ selectedfield]! = Undefined) {data [_ selectedfield] = checkbox. selected;} var mylistdata: treelistdata = treelistdata (this. listdata); var tree: Tree = tree (mylistdata. owner);/* var toggle: Boolean = checkbox. selected; */togglechildren (data, tree); var parent: Object = tree. getparentitem (data); toggleparents (parent, tree);}/*** assign a value to the checkbox */override protected function commitproperties (): void {super. commitproperties (); // trace (Data [_ selectedfield]) if (Data & Data [_ selectedfield]! = Undefined) {checkbox. selected = data [_ selectedfield];} else {checkbox. selected = false;}/*** build checkbox */override protected function createchildren (): void {super. createchildren (); checkbox = new checkbox (); addchild (checkbox); checkbox. addeventlistener (event. change, changehandler); myimage = new image (); myimage. source = 'Assets/inner.png '; myimage. addeventlistener (mouseevent. click, imagetogglehandler); ADDC Hild (myimage);} private function imagetogglehandler (Event: Event): void {checkbox. Selected =! Checkbox. selected; changehandler (event);}/*** reset the width of itemrenderer */override protected function measure (): void {super. measure (); measuredwidth + = checkbox. sort ();}/*** re-arrange the location and move the label back * @ Param unscaledwidth * @ Param unscaledheight */override protected function updatedisplaylist (unscaledwidth: Number, unscaledheight: number ): void {super. updatedisplaylist (unscaledwidth, unscaledheight); If (Super. Data) {If (Super. icon! = NULL) {checkbox. X = super. icon. x; checkbox. y = 13; super. icon. X = checkbox. X + checkbox. width + 25; super. label. X = super. icon. X + super. icon. width + 3;} else {checkbox. X = super. label. x; checkbox. y = 13; super. label. X = checkbox. X + checkbox. width + 25;} If (data [_ selectedfield] = "11") {myimage. X = checkbox. X + 3; myimage. y = checkbox. y-5; myimage. width = imagewidth; myimage. height = imageheig HT; checkbox. selected = false;} else {myimage. X = 0; myimage. y = 0; myimage. width = 0; myimage. height = 0 ;}} private function togglechildren (item: object, tree: tree): void {If (item = NULL) {return;} else {var treedata: itreedatadescriptor = tree. datadescriptor; item [_ selectedfield] = checkbox. selected; var tmptree: ilist = tree. dataprovider as ilist; tmptree. itemupdated (item); If (treedata. haschildren (item) {VaR Children: icollectionview = treedata. getchildren (item); var cursor: iviewcursor = children. createcursor (); While (! Cursor. afterlast) {togglechildren (cursor. current, tree); cursor. movenext () ;}}} private function toggleparents (item: object, tree: tree): void {If (item = NULL) {return;} else {var numchecks: int = 0; var numunchecks: Int = 0; var numcats: Int = 0; var treedata: itreedatadescriptor = tree. datadescriptor; var children: icollectionview = treedata. getchildren (item); var cursor: iviewcursor = children. createcursor (); While (! Cursor. afterlast) {If (cursor. current [_ selectedfield]) {numchecks ++;} else {numunchecks ++;} cursor. movenext ();} If (numchecks> 0 & numunchecks> 0) {item [_ selectedfield] = "11"} else if (numchecks> 0) {item [_ selectedfield] = true;} else {item [_ selectedfield] = false;} var tmptree: ilist = tree. dataprovider as ilist; tmptree. itemupdated (item); If (tree. getparentitem (item )! = NULL) {toggleparents (tree. getparentitem (item), tree:

[Bindable] public var collection: arraycollection = new arraycollection ([{"name": "Shanghai", "selected": false, "children": [{"name ": "Huangpu", "selected": false },{ "name": "Pudong", "selected": True, "children": [] },{ "name ": "Jingan", "selected": false },{ "name": "Xuhui", "selected": false}] },{ "name": "Beijing ", "selected": false, "children": [{"name": "Haidian", "selected": false },{ "name": "Chaoyang", "selected ": true },{ "name": "Fengtai", "selected": false}]);

<mx:Tree x="29" y="48" width="100%" height="100%"       id="groupTree" dataProvider="{collection}"       showRoot="true" fontSize="14" fontWeight="bold"       doubleClickEnabled="true" paddingLeft="20"          itemRenderer="com.anydata.consumer.renderers.TreeCheckBoxRenderer"         itemOpen="groTree_itemOpeningHandler(event)"         labelField="name"          defaultLeafIcon="@Embed(source='assets/ico_phone.gif')"          folderClosedIcon="@Embed(source='assets/ico_team.gif')"         folderOpenIcon="@Embed(source='assets/ico_team.gif')"></mx:Tree>