给DataGrid添加CheckBox全选列

最近做一个列表，需要用到全选列。于是先google一把，呵呵！这种基础的扩展网上还不少，不过很多都是你转我的，我转他的。而且有的功能还不健全。
比如有一类的扩展是通过覆盖validateProperties方法在实现的，这类的问题就是这些在点击全选的时候，列字段全选择了，但是在鼠标划过这些行的时候行上的选择框又自动的返回未选择的样子。
还有一些是内联的写在标签里的，这种方式不易扩展。还有一点最重要，网上的几乎所有的扩展都不支持当行全选后头部的全选框自动勾选的功能。
呵呵，最后只有自己再写一个。

我这边的要求很简单：
1、实现选择框列表，点击头部全选能全选
2、点击行选择框选中行，如果行全部选择，则头部选择框选择
3、能指定列的字段
4、在选择或则选中行时同时改变DataGrid的dataProvider中响应的数据值

其实这个只是扩展了一下下ItemRenderer，headerRenderer ，然后继承DataGridColumn写一个自己的GridColumn。
扩展的类有三个，分别是：
1、CheckBoxColumn：这个类继承了DataGridColumn
2、CheckBoxHeader：继承了CheckBox
3、CheckBoxRenderer：继承了CheckBox
如图：


代码如下：
CheckBoxColumn类

package org.extendx.grid
{
	import mx.controls.dataGridClasses.DataGridColumn;

	public class CheckBoxColumn extends DataGridColumn
	{
		public var header:CheckBoxHeader=null;
		public var columnRenderers:Array=[];
		
		public var checkField:String="selected";//默认选择框的字段
		
		public function CheckBoxColumn(columnName:String=null)
		{
			super(columnName);
			
		}
		public function setColumnRenderers(o:CheckBoxRenderer){
			this.columnRenderers.push(o);
		}
		
	}
}

CheckBoxHeader类

package org.extendx.grid
{
	import flash.events.MouseEvent;
	
	import mx.collections.ArrayCollection;
	import mx.controls.Alert;
	import mx.controls.CheckBox;
	import mx.controls.DataGrid;
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.events.DynamicEvent;
	
	public class CheckBoxHeader extends CheckBox
	{
		private var _data:DataGridColumn;
		private var isRegisted:Boolean=false;
		public var checkField:String="selected";//默认选择框的字段
		
		public function CheckBoxHeader()
		{
			super();
			this.setStyle("paddingLeft",5);
			this.addEventListener(MouseEvent.CLICK,this.onHeaderClick);

			
		}
		override public function set data(value:Object):void {
			_data=value as DataGridColumn;
			this.label=value.headerText
			if(!this.isRegisted){
				var cc:CheckBoxColumn=this.data as CheckBoxColumn;
				cc.header=this;
				this.checkField=cc.checkField;
				this.isRegisted=true;
			}
		}		
		override public function get data():Object
		{
			return _data;
		}
		override public function  set selected(value:Boolean):void{
			super.selected=value;	
			if(listData){
				var dg:DataGrid = DataGrid(listData.owner);
				var de:DynamicEvent=new DynamicEvent("selectedAllChange");
				de.selected=this.selected
				dg.dispatchEvent(de);
			}
		}		
		private function onHeaderClick(e:MouseEvent){
			var dg:DataGrid = DataGrid(listData.owner);
			var s:ArrayCollection=ArrayCollection(dg.dataProvider);
			var array=[];
			for(var i=0;i<s.length;i++){
				s[i][this.checkField]=this.selected;				
			}			
			dg.invalidateList();			
		}
	}
}

CheckBoxRenderer 类

package org.extendx.grid
{
	import flash.events.MouseEvent;
	
	import mx.collections.ArrayCollection;
	import mx.controls.Alert;
	import mx.controls.CheckBox;
	import mx.controls.DataGrid;
	import mx.controls.Label;
	import mx.controls.TextInput;
	
	public class CheckBoxRenderer extends CheckBox
	{
		private var isRegisted:Boolean=false;
		public var checkField:String="selected";//默认选择框的字段
		
		private var ml:Label=null
		public function CheckBoxRenderer()
		{
			super();
			this.setStyle("paddingLeft",5);
			this.setStyle("fontStyle","italic");//fontStyle: normal | italic | oblique;]
			this.setStyle("fontSize",13);//fontStyle: normal | italic | oblique;]
			this.addEventListener(MouseEvent.CLICK,this.onReClick);

		}
		override public function set data(value:Object):void {
			super.data=value;
			this.label=value.displayName;//这个地方写死了显示字段，需要改的朋友可以改改试试
			if(!isRegisted){
				isRegisted=true
				var dg:DataGrid = DataGrid(listData.owner)
				var cc:CheckBoxColumn=dg.columns[listData.columnIndex];
				this.checkField=cc.checkField;
			}
			this.selected=value[this.checkField];
		}
		override public function  set selected(value:Boolean):void{
			super.selected=value;				
		}

		private function onReClick(e){			
			this.data[this.checkField]=this.selected;
			var dg:DataGrid = DataGrid(listData.owner)
			var cc:CheckBoxColumn=dg.columns[listData.columnIndex];
			cc.header.selected=isAll();
		}
		private function isAll(){
			var dg:DataGrid = DataGrid(listData.owner)
			var s:ArrayCollection=ArrayCollection(dg.dataProvider);
			
			for(var i=0;i<s.length;i++){
				if(!s[i][this.checkField]){
					return false
				}				
			}		
			return true
		}
	}
}

调用代码：

			this.dg=new DataGrid();
		
			var dgcc:CheckBoxColumn=new CheckBoxColumn();
			dgcc.headerText="";
			dgcc.width=25;
			dgcc.dataField="displayName"
			dgcc.checkField="selected"//设置选择框对应字段
			dgcc.itemRenderer=new ClassFactory(CheckBoxRenderer);//此处还可以放到CheckBoxColumn内部
			dgcc.headerRenderer=new ClassFactory(CheckBoxHeader);//此处还可以放到CheckBoxColumn内部

		var dgcc2:DataGridColumn=new DataGridColumn();
			dgcc2.headerText="";
			//dgcc2.width=40;
			dgcc2.dataField="displayName";

this.dg.columns=[dgcc,dgcc2]

效果图：

顶一一下,  大家还在用halo(mx) DataGrid?
为什么不用spark DataGrid?

个人觉得spark有恨多毛病呀，比如文本输入框里面的中文字体很难看。 呵呵！
不知道有木有那位童鞋调整过这个东西没，有的话分享分享。

今天知道了css里加上命名空间，呵呵样式不是问题了

反了吧, 同学
应该是 halo(mx) DataGrid有许多问题, spark DataGrid 在很多方面都进行了改进!