如上图,是对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>
2)单元格背景色设置,行字体颜色设置,复选框
该部分都是使用对应列的渲染器进行修改,三个渲染器代码如下:
单元格背景色渲染器
<?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>