控件mx:DataGrid
1、不需要项目中交替出现的背景色,即是alternatingItemColors的颜色不显示,设置backgroundColor使其失效
2、头部的文本要垂直居中,自定义项呈示器组件headerRenderer
3、背景要透明,设置contentBackgroundAlpha,backgroundAlpha都为0。
4、头部的背景自定义,headerBackgroundSkin引用自定义的皮肤文件CustDGHeaderBackgroundSkin
5、去掉垂直网格线verticalGridLines=“false”
以下是mx:DataGrid的CSS代码:
.PMDataGrid{
backgroundColor:#000000;
backgroundAlpha:0;
contentBackgroundAlpha:0;
color: #000000;
fontFamily: 宋体;
fontSize: 12;
verticalAlign:middle;
rollOverColor:#ffdede;
selectionColor:#ffdede;
textAlign:center;
textRollOverColor:#333333;
textSelectedColor:#333333;
verticalGridLines: false;
verticalGridLineColor: #d7e4e6;
horizontalGridLines:true;
horizontalGridLineColor:#d7e4e6;
borderVisible:false;
headerStyleName:"mydataGridHeaderStyle";
headerSeparatorSkin:ClassReference("mx.skins.ProgrammaticSkin");
headerBackgroundSkin:ClassReference("packageName.CustDGHeaderBackgroundSkin");
}
.mydataGridHeaderStyle {
color: #333333;
fontSize:13;
fontFamily:宋体;
textAlign:center;
}
在mx:DataGrid中设置Header头部文本垂直居中的代码,注:一定要用mx:label控件,否则会提交转换格式错误
<mx:DataGrid dataProvider="{dataArray}" styleName="PMDataGrid"
headerHeight="33" rowHeight="30" rowCount="5" >
<mx:columns>
<mx:DataGridColumn dataField="pmPosition" sortable="false">
<mx:headerRenderer>
<fx:Component>
<mx:Label text="城市" paddingTop="8" />
</fx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
</mx:columns>
....
</mx:DataGrid>
CustDGHeaderBackgroundSkin.mxml文件代码:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin ... minHeight="30" minWidth="25">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
override protected function initializationComplete():void{
useChromeColor=true;
super.initializationComplete();
}
]]>
</fx:Script>
<s:Group left="0" top="0" right="0" bottom="0">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#ecf4f4" alpha="0.64" />
</s:fill>
</s:Rect>
<s:Rect width="100%" height="5" top="0">
<s:fill>
<s:SolidColor color="#dae7e8" />
</s:fill>
</s:Rect>
<s:Rect width="100%" height="1" bottom="0">
<s:fill>
<s:SolidColor color="#dae7e8" />
</s:fill>
</s:Rect>
</s:Group>
</s:SparkSkin>
---- The End -----