Flex在Tree控件上添加CheckBox

告示:本文为原创文章, 如果转载请注明出处！ http://summerofthatyear-gmail-com.iteye.com/blog/326302
      网上遇到很多需要在Tree控件添加CheckBox等控件的问题, 本以为把Tree的itemRenderer设置成mx.controls.CheckBox 就可以完事了, 但是试了之后才发现没有这么简单 . . .
      今天看了Tree的源码, Tree在初始化的时候默认给自己设置itemRenderer属性. 此属性值也是Flex现成的:mx.controls.treeClasses.TreeItemRenderer.
      它内部分为三部分:1,icon也是就三角形的小图标. 2,disclosureIcon文件夹图标. 3,label显示的文字. 我只要在label前面加上一个CheckBox就行了.
       于是我写了一个类:TreeCheckBoxRenderer继承mx.controls.treeClasses.TreeItemRenderer源码如下:

package com.montage.controls.treeClasses   

1. {   
2. import flash.events.Event;   
3.   
4. import mx.controls.CheckBox;   
5. import mx.controls.treeClasses.TreeItemRenderer;   
6. import mx.controls.treeClasses.TreeListData;   
7.   
8. /**  
9.  * 支持CheckBox的TreeItemRenderer  
10.  * @author Montage  
11.  */    
12. public class TreeCheckBoxRenderer extends TreeItemRenderer   
13. {   
14.     public function TreeCheckBoxRenderer()   
15.     {   
16.         super();   
17.     }   
18.        
19.     /**  
20.      * 表示CheckBox控件从data中所取数据的字段  
21.      */        
22.     private var _selectedField:String = "selected";   
23.        
24.     protected var checkBox:CheckBox;   
25.        
26.     /**  
27.      * 构建CheckBox  
28.      */        
29.     override protected function createChildren():void  
30.     {   
31.         super.createChildren();   
32.         checkBox = new CheckBox();   
33.         addChild( checkBox );   
34.         checkBox.addEventListener(Event.CHANGE, changeHandler);   
35.     }   
36.        
37.     /**  
38.      * 点击checkbox时,更新dataProvider  
39.      * @param event  
40.      */        
41.     protected function changeHandler( event:Event ):void  
42.     {   
43.         if( data && data[_selectedField] != undefined )   
44.         {   
45.             data[_selectedField] = checkBox.selected;   
46.         }   
47.     }    
48.        
49.     /**  
50.      * 初始化控件时, 给checkbox赋值  
51.      */        
52.     override protected function commitProperties():void  
53.     {   
54.         super.commitProperties();   
55.         trace(data[_selectedField])   
56.         if( data && data[_selectedField] != undefined )   
57.         {   
58.             checkBox.selected = data[_selectedField];   
59.         }   
60.         else  
61.         {   
62.             checkBox.selected = false;   
63.         }   
64.     }   
65.        
66.     /**  
67.      * 重置itemRenderer的宽度  
68.      */        
69.     override protected function measure():void  
70.     {   
71.         super.measure();   
72.         measuredWidth += checkBox.getExplicitOrMeasuredWidth();   
73.     }   
74.        
75.     /**  
76.      * 重新排列位置, 将label后移  
77.      * @param unscaledWidth  
78.      * @param unscaledHeight  
79.      */        
80.     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void  
81.     {   
82.         super.updateDisplayList(unscaledWidth, unscaledHeight);   
83.         var startx:Number = data ? TreeListData( listData ).indent : 0;   
84.            
85.         if (disclosureIcon)   
86.         {   
87.             disclosureIcon.x = startx;   
88.   
89.             startx = disclosureIcon.x + disclosureIcon.width;   
90.                
91.             disclosureIcon.setActualSize(disclosureIcon.width,   
92.                                          disclosureIcon.height);   
93.                
94.             disclosureIcon.visible = data ?   
95.                                      TreeListData( listData ).hasChildren :   
96.                                      false;   
97.         }   
98.            
99.         if (icon)   
100.         {   
101.             icon.x = startx;   
102.             startx = icon.x + icon.measuredWidth;   
103.             icon.setActualSize(icon.measuredWidth, icon.measuredHeight);   
104.         }   
105.            
106.         checkBox.move(startx, ( unscaledHeight - checkBox.height ) / 2 );   
107.            
108.         label.x = startx + checkBox.getExplicitOrMeasuredWidth();   
109.     }   
110. }   
111. }  

package com.montage.controls.treeClasses
{
import flash.events.Event;

import mx.controls.CheckBox;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;

/**
 * 支持CheckBox的TreeItemRenderer
 * @author Montage
 */	
public class TreeCheckBoxRenderer extends TreeItemRenderer
{
	public function TreeCheckBoxRenderer()
	{
		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时,更新dataProvider
	 * @param event
	 */		
	protected function changeHandler( event:Event ):void
	{
		if( data && data[_selectedField] != undefined )
		{
			data[_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();
	}
}
}

测试文件如下:

<?xml version="1.0" encoding="utf-8"?>  

1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">  
2.     <mx:Script>  
3.         <![CDATA[  
4.             import mx.collections.ArrayCollection;  
5.               
6.             [Bindable]  
7.             public var collection:ArrayCollection = new ArrayCollection([  
8.                 { "name" : "上海", "selected":false, "children":[  
9.                     { "name":"黄浦", "selected":false },  
10.                     { "name":"浦东", "selected":true },  
11.                     { "name":"静安", "selected":false },  
12.                     { "name":"徐汇", "selected":false }  
13.                 ]},  
14.                 { "name":"北京", "selected":false, "children":[  
15.                     { "name":"海淀", "selected":false },  
16.                     { "name":"朝阳", "selected":true },  
17.                     { "name":"丰台", "selected":false }  
18.                 ]}  
19.             ]);  
20.               
21.         ]]>  
22.     </mx:Script>  
23.     <mx:Tree width="300" height="500" labelField="name"    
24. itemRenderer="com.montage.controls.treeClasses.TreeCheckBoxRenderer" dataProvider="{collection}"/>  
25. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[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 }
				]}
			]);
			
		]]>
	</mx:Script>
	<mx:Tree width="300" height="500" labelField="name" 
itemRenderer="com.montage.controls.treeClasses.TreeCheckBoxRenderer" dataProvider="{collection}"/>
</mx:Application>

      注意:selected属性很重要, 此属性在数据源内, 标致当前节点的CheckBox是否选中.点击CheckBox会自动改变响应的数据源.  如果想知道哪些被选中的话, 就遍历Tree的dataProvider吧~
      谨以此文贡献给战斗在RIA第一线的兄弟姐妹们.