Flex DataGrid中嵌套Checkbox实现全选 另分享一个checkbox居中，圆形布局代码

这个页面的最终效果如果所示：

当CheckBox没有被选中时第二列不能被编辑，第三列可以被编辑。

当CheckBox被选中时，第二列可以被编辑，第三列不能被编辑。

今天做了个在Flex中使用DataGrid，并且DataGrid里面嵌套CheckBox。最终实现全选，也可以实现都选择了那几个记录。先把概况和代码分享下。

概况1：建立提供数据的ArrayCollection，可以直接在MXML里面创建，也可以引入XML文件，我用的后者。HttpService里面的URL是该文件所在的路径。

概况2：在数据源里面加入一个额外的列，比如：selected，里面的值为布尔型，跟CheckBox绑定，可以循环遍历以确定都有哪一记录被选中。

下面直接上代码：

<?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"
			   creationComplete="showDataGrid.send()"
			   minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.CheckBox;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			[Bindable]
			private var employeeList:ArrayCollection = new ArrayCollection();
			
			private var checkbox:CheckBox;
			
			protected function showDataGrid_resultHandler(event:ResultEvent):void
			{
				employeeList = showDataGrid.lastResult.employees.employee;
			}

			protected function showDataGrid_faultHandler(event:FaultEvent):void
			{
				Alert.show(event.fault.toString());
			}
			
			public function checkbox_clickHandler(event:Event):void
			{
				dataGrid.dataProvider = employeeList;
			}
			
			public function selectedAllorNot(event:MouseEvent):void{
				checkbox = event.currentTarget as CheckBox;
				for each(var item:Object in employeeList){
					item.selected = checkbox.selected;
				}
				dataGrid.dataProvider = employeeList;
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:HTTPService id="showDataGrid" url="employeeList/employees.xml" result="showDataGrid_resultHandler(event)"
					    fault="showDataGrid_faultHandler(event)"/>
		<mx:DateFormatter id="dateFormatter" formatString="DD-MM-YY"/>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel id="showData" horizontalCenter="0" verticalCenter="0" title="Show The DataGrid">
		<mx:DataGrid id="dataGrid" dataProvider="{employeeList}">
			<mx:columns>
				<mx:DataGridColumn width="200" editable="false">
					<mx:headerRenderer>
						<fx:Component>
							<mx:CheckBox label="Selected/Unselected All" textAlign="center" click="outerDocument.selectedAllorNot(event)"/>
						</fx:Component>
					</mx:headerRenderer>
					<mx:itemRenderer>
						<fx:Component>
							<mx:CheckBox textAlign="center" selected="@{data.selected}" click="outerDocument.checkbox_clickHandler(event)">
							</mx:CheckBox>
						</fx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
				<mx:DataGridColumn headerText="Employee Name" width="105">
					<mx:itemRenderer>
						<fx:Component>
							<mx:TextInput text="{data.firstName} {data.lastName}" editable="{data.selected}" borderVisible="false" visible="false" />
						</fx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
				<mx:DataGridColumn headerText="Hire Date">
					<mx:itemRenderer>
						<fx:Component>
							<mx:TextInput text="{data.hireDate}" editable="{!data.selected}" borderVisible="false" visible="false"/>
						</fx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
	</s:Panel>
</s:Application>

实现CheckBox居中的代码：

package utils
{
	    import flash.display.DisplayObject;      
	    import mx.controls.CheckBox;      
	    import flash.text.TextField;      
	        
	    public class CenterCheckBox extends CheckBox      
		    {      
		        // 居中展现      
		        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void      
		        {      
			            super.updateDisplayList(unscaledWidth, unscaledHeight);      
		            	var n:int = numChildren;      
			            for(var i:int = 0; i < n; i++)      
				            {      
					                var c:DisplayObject = getChildAt(i);      
					                if( !(c is TextField))      
						                {      
							                    c.x = Math.round((unscaledWidth - c.width) / 2);      
							                    c.y = Math.round((unscaledHeight - c.height) /2 );      
							                }      
					            }      
			        }      
		    }    

}

实现圆形布局的代码：

package customLayout
{
	import mx.core.ILayoutElement;
	
	import spark.layouts.supportClasses.LayoutBase;
	
	public class CircleLayout extends LayoutBase
	{
		public function CircleLayout()
		{
			super();
		}
		
		override public function updateDisplayList(width:Number, height:Number):void{
			
			super.updateDisplayList(width, height);
			
			if (!target)
				
				return;
			
			var layoutElement:ILayoutElement;
			
			var count:uint = target.numElements;
			
			var angle : Number = 360/count;
			
			var radius : Number = Math.min( target.width/2, target.height/2 ) - 25;
			
			var width2 : Number = target.width/2;
			
			var height2 : Number = target.height/2;
			
			for (var i:int = 0; i < count; i++)
				
			{
				
				layoutElement = target.getElementAt(i);
				
				if (!layoutElement || !layoutElement.includeInLayout)
					
					continue;          
				
				var radAngle : Number = (angle * i) * (Math.PI / 180) ;
				
				var _x : Number = Math.sin( radAngle );
				
				var _y : Number = - Math.cos( radAngle );
				
				layoutElement.setLayoutBoundsPosition( width2 + (_x * radius) - 25, height2 + (_y * radius) - 10 );
				
			} 
		}
	}
}