Flex mx:DataGrid樣式調整(Header頭部垂直居中)

控件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 -----