自定义 修改Flex DataGrid的 Header Style

mx|DataGrid.MarketMoversDataGrid
{
	alternating-item-colors:#F1F1F2, #FFFFFF;
	useRollOver: false;
	vertical-grid-line-color:#A7A9AC;
	border-visible:false;
	color: #000000;
	font-weight: bold;
	font-size: 11pt;
	header-background-skin: ClassReference("au.com.tabcorp.neo.common.presentation.skins.MarketMoversDataGridHeaderSkin");
	header-style-name: marketMoversDGHeader;
	vertical-scroll-bar-style-name: dgVScrollBar;
/*	gradient-color1:#627090;
	gradient-color2:#434d67;*/
}
.marketMoversDGHeader{
	color: #000000;
	font-weight: bold;
	font-size: 11pt;
}

 

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
			 xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
	<!--<s:Rect top="0" left="0" right="0" bottom="0">
		<s:fill>
			<s:SolidColor color="#ffffff"/>
		</s:fill>
	</s:Rect>-->
	
	<!-- layer 1: fill -->
	<s:Rect left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:SolidColor color="#ffffff"/>
		</s:fill>
	</s:Rect>
	
	<!-- layer 2: fill lowlight -->
	<s:Rect left="0" right="0" bottom="0" height="9">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="black" alpha="0.0099" />
				<s:GradientEntry color="black" alpha="0.0627" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 3: fill highlight -->
	<s:Rect left="0" right="0" top="0" height="9">
		<s:fill>
			<s:SolidColor color="white"/>
		</s:fill>
	</s:Rect>
	
	<!-- layer 4: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
	<s:Rect left="0" right="0" bottom="0" height="1">
		<s:fill>
			<s:SolidColor color="#ffffff" />
		</s:fill>
	</s:Rect>
</s:SparkSkin>

 

<mx:DataGrid id="dg" width="{marketMoversPM.PANEL_WIDTH}" wordWrap="true" rowHeight="30" verticalScrollPolicy="off"
				 styleName="MarketMoversDataGrid" height="100%" headerHeight="40" rowCount="{marketMoversPM.model.gridFlattenData.length}"
				 draggableColumns="false" resizableColumns="false">
		<mx:columns>
			<mx:DataGridColumn id="column_1" width="{SMALL_COLUMN_WIDTH}" sortable="true" headerRenderer="au.com.tabcorp.neo.racing.marketmovers.presentation.MarketMoverDataGridHeader" 
							   headerText="No."  dataField="runnerNumber">
				<mx:itemRenderer>
					<fx:Component>
						<mx:Box	width="30" height="100%" verticalAlign="middle" verticalScrollPolicy="off" horizontalScrollPolicy="off" buttonMode="true" useHandCursor="true" mouseChildren="false">
							<mx:Label text="{data.runnerNumber}" width="100%"  height="15" textAlign="center"  buttonMode="true" useHandCursor="true" mouseChildren="false" />
						</mx:Box>
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>