Flex mx:DataGrid样式调整(Header头部垂直居中)

最新推荐文章于 2024-05-27 19:09:06 发布

Qiustion

最新推荐文章于 2024-05-27 19:09:06 发布

阅读量3k

点赞数

分类专栏： Flex4

本文链接：https://blog.csdn.net/Qiustion/article/details/41043599

版权

Flex4 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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