Flex在Tree控件上添加CheckBox

Re:如何让tree的每个结点都是一个checkbox?

<mx:Tree itemRenderer="{new ClassFactory(CheckBox)}">
        <mx:dataProvider>
            <mx:Object label="a" />
            <mx:Object label="b" />
        </mx:dataProvider>
</mx:Tree>

设置 item render

 

网上遇到很多需要在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源码如下:

Java代码

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

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代码

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