flex spark datagird 样式

标签：datagrid   头部背景色及字体居中   单元格背景色   行字体颜色   复选框   

如上图，是对datagrid的样式修改。包含：头部背景色及字体居中，单元格背景色设置，行字体颜色设置，复选框。基本都是基于渲染器的定义。

1）头部背景色及字体居中：

头部渲染器并没有直接的属性可用，需要自定义datagrid的皮肤。在自动生成的皮肤中，可以找到

 <!--- Defines the value of the headerRenderer property for the columnHeaderGroup. 
              The default is spark.skins.spark.DefaultGridHeaderRenderer -->
        <fx:Component id="headerRenderer">
            <itemrenders:DataGridHeaderRender />
        </fx:Component>

在此处将渲染器改为自定义渲染器。自定义渲染器中主要修改两处：

1、label的字体居中属性

	<s:Label id="labelDisplay" 
				 verticalCenter="1" left="0" right="0" top="0" bottom="0"
				 textAlign="center"
				 verticalAlign="middle"
				 maxDisplayedLines="1"
				 showTruncationTip="true" />

2、背景色设置

	<!-- layer 2: fill -->
	<!--- @private -->
	<s:Rect id="fill" left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:SolidColor color="0x425965" />
		</s:fill>
	</s:Rect>

该部分都是使用对应列的渲染器进行修改，三个渲染器代码如下：

单元格背景色渲染器

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" 
					clipAndEnableScrolling="true">
	
	<fx:Script>
		<![CDATA[
			override public function prepare(hasBeenRecycled:Boolean):void 
			{
				if(data)
				{
						borderContainer.setStyle("backgroundColor",data[column.dataField]);
						borderContainer.setStyle("backgroundAlpha",1);
				}
			}
		]]>
	</fx:Script>
	<s:BorderContainer id="borderContainer" width="100%" height="100%">
	</s:BorderContainer>
</s:GridItemRenderer>

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
					xmlns:s="library://ns.adobe.com/flex/spark"
					xmlns:mx="library://ns.adobe.com/flex/mx"
					textAlign="center">
	<fx:Script>
		<![CDATA[
			override public function prepare(hasBeenRecycled:Boolean):void 
			{
				if(data)
				{
					labelDisplay.text = data[column.dataField];
					labelDisplay.setStyle("color",data.lineColor);
				}
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Label id="labelDisplay" textAlign="center" width="100%" height="100%"
			 verticalAlign="middle"/>
</s:GridItemRenderer>

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" 
					clipAndEnableScrolling="true">
	
	<fx:Script>
		<![CDATA[
			override public function prepare(hasBeenRecycled:Boolean):void 
			{
				if(data)
				{
					if(data[column.dataField] == "0" ||data[column.dataField] == "1")
					{
						lblData.selected = stringToBoolean(data[column.dataField]);
					}
					else
					{
						lblData.selected = data[column.dataField];
					}
				}
			}
			
			private function stringToBoolean(string:String):Boolean
			{
				var boo:Boolean;
				if(string == "0")
				{
					boo = false;
				}
				else if(string == "1")
				{
					boo = true;
				}
				return boo;
			}
			
			protected function lblData_changeHandler(event:Event):void
			{
				data[column.dataField] = lblData.selected;
			}
		]]>
	</fx:Script>
	<s:Group id="group" width="100%" height="100%">
		<s:CheckBox id="lblData" horizontalCenter="0" top="4" width="40" change="lblData_changeHandler(event)"/>
	</s:Group>
</s:GridItemRenderer>

flex spark datagird 样式

标签：datagrid   头部背景色及字体居中   单元格背景色   行字体颜色   复选框   

原文地址：http://blog.csdn.net/zhongyuan_1990/article/details/24702409