flex spark DataGrid 每列的label居中显示

迷南。 2022-01-22 09:15 188阅读 0赞

在flex4 里面，spark的DataGrid的列中的label 不能居中显示。也无法设置。

可以在每列中设置一下headerRenderer。

<s:DataGrid id="dg" width="100%" height="100%" verticalScrollPolicy="on" dataProvider="{dpFlat}" textAlign="center">
    	<s:columns>
    	     <s:ArrayList>
    		<s:GridColumn headerText="ID" dataField="busJobNo" headerRenderer="com.tm.Renderer.SparkDGHeadCenter" sortable="false"/>
    		<s:GridColumn headerText="级别" dataField="warnLevel" headerRenderer="com.tm.Renderer.SparkDGHeadCenter" sortable="false"/>
    		<s:GridColumn headerText="信息" dataField="warningMessage" headerRenderer="com.tm.Renderer.SparkDGHeadCenter" sortable="false"/>
    		<s:GridColumn headerText="时间" dataField="insTime" headerRenderer="com.tm.Renderer.SparkDGHeadCenter" sortable="false"/>
    	     </s:ArrayList>
            </s:columns>
    </s:DataGrid>

SparkDGHeadCenter 宣染器类如下：

<?xml version="1.0" encoding="utf-8"?>
    <s:DefaultGridHeaderRenderer  xmlns:fx="http://ns.adobe.com/mxml/2009" 
    				xmlns:s="library://ns.adobe.com/flex/spark" 
    				xmlns:mx="library://ns.adobe.com/flex/mx">
    	
    	<s:labelDisplay>  
    	        <s:Label left="0" right="0" id="labelDisplay" verticalCenter="1"  textAlign="center" fontWeight="bold" verticalAlign="middle"  />  
        </s:labelDisplay>  
    	
    </s:DefaultGridHeaderRenderer >

这样就可以把label 居中显示了。

当然还有一种方法， 其实和上面也差不多，就是对spark DataGrid写个皮肤类。如下使用：

<s:DataGrid id="dg" width="100%" height="100%" verticalScrollPolicy="on" dataProvider="{dpFlat}" textAlign="center" skinClass="com.tm.skin.DataGridSkin">
         <s:columns>
    	<s:ArrayList>
    	  <s:GridColumn headerText="ID" dataField="busJobNo" headerRenderer="com.tm.Renderer.SparkDGHeadCenter" sortable="false"/>
    	  <s:GridColumn headerText="级别" dataField="warnLevel" headerRenderer="com.tm.Renderer.SparkDGHeadCenter" sortable="false"/>
    	  <s:GridColumn headerText="信息" dataField="warningMessage" headerRenderer="com.tm.Renderer.SparkDGHeadCenter" sortable="false"/>
    	  <s:GridColumn headerText="时间" dataField="insTime" headerRenderer="com.tm.Renderer.SparkDGHeadCenter" sortable="false"/>
    	</s:ArrayList>
         </s:columns>
    </s:DataGrid>

DataGridSkin 皮肤类下载。

这就样可以了。