关于Flex的DataGrid的应用拓展（一） 博客分类： flex flexdatagridrollover

        Flex的DataGrid是Flex软件开发过程中最重要的组件之一，但这个组件确实让大家既爱又恨。这个组件的代码非常多，要是连继承类算起来，总么也要上万行代码。因此，分享一些在工作中的一些小用途希望大家能喜欢。首先介绍一下如何设置header的的rollover颜色。在DataGrid中不能单独设置header的rollover颜色，只能设置一个和数据统一的rollover颜色。步骤如下：

    （1）创建一个DataGrid继承类：

package
{
	import mx.controls.DataGrid;
	import mx.core.mx_internal;

	use namespace mx_internal;
	/**
	 *  The color of the header background when the user rolls over the row.
	 *  
	 *  The default value for the Halo theme is <code>0xB2E1FF</code>.
	 *  The default value for the Spark theme is <code>0xCEDBEF</code>.
	 *  
	 *  @langversion 3.0
	 *  @playerversion Flash 9
	 *  @playerversion AIR 1.1
	 *  @productversion Flex 3
	 */
	[Style(name="headerRollOverColor", type="uint", format="Color", inherit="yes")]
  	
	public class headerDatagrid extends DataGrid
	{
		public function headerDatagrid()
		{
			super();
			headerClass=customDataGridHeader;
		}
	
	}
}

注：这个继承类干了两件事情。1）指定一个样式 ；2）指定一个Header实现类用于覆盖原来的Header，下一步会介绍。



2）继承DatagridHeader实现对Header rollOver的指定：

package
{
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.controls.dataGridClasses.DataGridHeader;
	import mx.controls.listClasses.IListItemRenderer;
	 
	public class customDataGridHeader extends DataGridHeader
	{
		
		public function customDataGridHeader()
		{
			super();
		}
		
		 /**
		 * override current style drawing,perpose: create new style for  header's rollover.
		 */ 
		override protected function drawHeaderIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
		{
			var g:Graphics = indicator.graphics;
			g.clear();
			if(color==getStyle("rollOverColor")&&getStyle("headerRollOverColor")){
			  color=getStyle("headerRollOverColor");
			}
			g.beginFill(color);
			g.drawRect(0, 0, width, height);
			g.endFill(); 
			indicator.x = x;
			indicator.y = y;
		}
	}
}

3）调用这个实现了header rollover 的实现类：

<?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" minWidth="955" minHeight="600" xmlns:local="*">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
	</fx:Declarations>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		@namespace local "*";
		 mx|DataGrid{
			 headerRollOverColor:#ff0000;
		 }
		
		
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable] 
			public var collection:ArrayCollection = new ArrayCollection([ 
				{ "name1" : "上海", "selected":false},  
				{ "name1":"黄浦", "selected":false }, 
				{ "name1":"浦东", "selected":true }, 
				{ "name1":"静安", "selected":false }, 
				{ "name1":"徐汇", "selected":false }, 
				{ "name1":"北京", "selected":false},
				{ "name1":"海淀", "selected":false }, 
				{ "name1":"朝阳", "selected":true }, 
				{ "name1":"丰台", "selected":false } ]); 
		]]>
	</fx:Script>
	<local:headerDatagrid  width="300" id="datagrid" dataProvider="{collection}" >
		<local:columns>
			<mx:DataGridColumn headerText="地区" dataField="name1"  itemRenderer="datagridItemrender" >
			</mx:DataGridColumn>
			<mx:DataGridColumn headerText="选择" dataField="selected">
			</mx:DataGridColumn>
		</local:columns>
		
	</local:headerDatagrid>
</s:Application>

注：这几个类别的应用都在Flex4.1中运行过，效果不错。另外，如果想知道为什么这样，那就多去读源码吧。这里不再熬述。