Flex learning --- rewrite treeitemrenderer to add the checkbox to the tree menu

The requirements for the menu tree + check box in the project can be solved by adding itemrender to the list control as usual. Who knows this is not the case. Decisive Baidu. I have read the source code of the tree and found that:

Tree has set an itemrnederer by default in the constructor. In addition, its itemrenderer is not the same as other ones, including three parts: 1. open/close button 2. folder icon 3. Text Box

Solution:

The itemrender of the rewrite tree. The source code is as follows:

Package COM. CSMs. view. renderers. design {import COM. CSMs. model. VO. drawingtypevo; import flash. events. event; import MX. binding. utils. bindingutils; import MX. collections. arraycollection; import MX. controls. checkbox; import MX. controls. tree; import MX. controls. treeclasses. treeitemrenderer; import MX. controls. treeclasses. treelistdata; public class treecheckboxrenderer extends treeitemrenderer {public function t Reecheckboxrenderer () {super ();} private VaR _ selectedfield: String = "selected"; protected var checkbox: checkbox; override protected function createchildren (): void {super. createchildren (); If (! Checkbox) {checkbox = new checkbox (); addchild (checkbox); checkbox. addeventlistener (event. change, changehandler) ;}}/*** check box change event, bind sublevel **/protected function changehandler (Event: Event): void {trace (checkbox. selected); If (Data & Data [_ selectedfield]! = Undefined) {data [_ selectedfield] = checkbox. selected; trace ("data [_ selectedfield]" + checkbox. selected); bindchilren (data as drawingtypevo);}/*** check box change. After changing the data source, call this method to bind the parent level **/override protected function commitproperties (): void {trace ("commitproperties"); super. commitproperties (); If (Data & Data [_ selectedfield]! = Undefined) {bindfather (data as drawingtypevo); checkbox. selected = data [_ selectedfield];} else {trace ("checkbox. selected = "+ checkbox. selected); checkbox. selected = false ;}/ ***** measurement size **/override protected function measure (): void {super. measure (); measuredwidth + = checkbox. getexplicitormeasuredwidth ();}/*** update display list **/override protected function updatedisplaylist (unscaledwidth: Number, u Nscaledheight: Number): void {trace ("updatedisplaylist"); Super. updatedisplaylist (unscaledwidth, unscaledheight); var startx: Number = data? Treelistdata (listdata ). indent: 0; // close/open the icon display position if (disclosureicon) {disclosureicon. X = startx; startx = disclosureicon. X + disclosureicon. width; disclosureicon. setactualsize (disclosureicon. width, disclosureicon. height); disclosureicon. visible = data? Treelistdata (listdata ). haschildren: false;} // folder icon display position if (icon) {icon. X = startx; startx = icon. X + icon. measuredwidth; icon. setactualsize (icon. measuredwidth, icon. measuredheight);} // move the check box to the checkbox behind the folder icon. move (startx, (unscaledheight-checkbox. height)/2); // set the displayed text to the label after the check box. X = startx + checkbox. getexplicitormeasuredwidth ();}/*** bind parent: if a child is selected, the parent is selected. If no parent is selected, the parent is not selected. **/private function Bindfather (drawingtype: drawingtypevo): void {trace ("bindfather:" + drawingtype. fname); var childtype: arraycollection = drawingtype. children; var ischeck: Boolean = false; If (childtype! = NULL & childtype. length> 0) {for (var I: Int = 0; I <childtype. length; I ++) {var currtype: drawingtypevo = childtype [I] As drawingtypevo; If (currtype. selected) {ischeck = true; break;} drawingtype. selected = ischeck;} trace ("bindfather:" + drawingtype. fname + ":" + ischeck);}/*** bind a child level: if the parent level is selected, select all the child levels. If the parent level is not selected, sub-level all do not select **/private function bindchilren (drawingtype: drawingtypevo): void {trace (drawingtype. fname ); Drawingtype. Selected = (data as drawingtypevo). Selected; var childtype: arraycollection = drawingtype. Children; If (childtype! = NULL & childtype. length> 0) {for (var I: Int = 0; I <childtype. length; I ++) {var currtype: drawingtypevo = childtype [I] As drawingtypevo; bindchilren (currtype );}}}}}

Entity class:

 

package com.csms.model.vo{import mx.collections.ArrayCollection;[Bindable][RemoteClass(alias="com.csms.model.vo.DrawingtypeVo")]/** * * @author fengmoyan * */public class DrawingtypeVo{private var _FId:String;private var _drawingtype:DrawingtypeVo;private var _FName:String;private var _FIndex:String;private var _FMark:String;private var _drawings:Array;private var _partprojectDrawingtypes:Array;private var _drawingtypes:Array;private var _FParentId:String;private var _selected:Boolean;private var _children:ArrayCollection;public function DrawingtypeVo(){}public function get selected():Boolean{return _selected;}public function set selected(value:Boolean):void{_selected = value;}public function get children():ArrayCollection{return _children;}public function set children(value:ArrayCollection):void{_children = value;}public function get FParentId():String{return _FParentId;}public function set FParentId(value:String):void{_FParentId = value;}public function get FId():String{return _FId;}public function set FId(value:String):void{_FId = value;}public function get drawingtype():DrawingtypeVo{return _drawingtype;}public function set drawingtype(value:DrawingtypeVo):void{_drawingtype = value;}public function get FName():String{return _FName;}public function set FName(value:String):void{_FName = value;}public function get FIndex():String{return _FIndex;}public function set FIndex(value:String):void{_FIndex = value;}public function get FMark():String{return _FMark;}public function set FMark(value:String):void{_FMark = value;}public function get drawings():Array{return _drawings;}public function set drawings(value:Array):void{_drawings = value;}public function get partprojectDrawingtypes():Array{return _partprojectDrawingtypes;}public function set partprojectDrawingtypes(value:Array):void{_partprojectDrawingtypes = value;}public function get drawingtypes():Array{return _drawingtypes;}public function set drawingtypes(value:Array):void{_drawingtypes = value;}}}

You can reference it on the page when using it.

<mx:Tree height="100%" id="tree" allowMultipleSelection="true" itemRenderer="com.csms.view.renderers.design.TreeCheckBoxRenderer" width="60%" dataProvider="{_targetData}" labelField="FName" ></mx:Tree>

 

 

Function introduction:

1. Check box added

2. Parent-Child Cascade

A> when you click "parent", select all or not select any child level.

B> when you click sub-level, if the same level is selected, select the parent level. Otherwise, select the parent level.
Note:

1. Rewrite the item display of the tree

2. Add checkbox

3. Add an event to the checkbox

4. When the checkbox status changes, the selected data source status is changed and the selected status is bound to the sublevel.

5. After the modification, rewrite the commitproperties method of the parent class (this method will be called when the attribute is changed) and bind the selected state of the parent class.

6. The parent-level updatedisplay method (called during component rendering) is used to set the tree menu view.

 

Because of project requirements, the tree menu is read from the database. If you need this function, you can customize a static arraycolloction test.

 

Additional: