플렉스 : 스파크 DataGrid 헤더 텍스트 정렬을 제어하는 ​​방법?

Question

나는 스파크 데이터 그리드에서 10 열이, 일부 헤더 왼쪽 정렬해야하는 경우, 일부 헤더는 오른쪽 정렬, 일부는 중심이 작업을 수행하는 가장 간단한 방법은 무엇입니까?

사용자 정의 headerRenderer가 필요하다고 가정 할 때 간단한 예제가 있습니까?

미리 의견을 보내 주셔서 감사합니다.

Answer 1

나는이 문제를 해결하기 위해 찾을 수있는 가장 간단한 방법은이 링크에서 설명한 바와 같이, 스파크 DefaultGridHeaderRenderer의 설정을 무시하는 것입니다 구체적

http://flexponential.com/2011/10/30/changing-fontweight-of-spark-datagrid-headers/

, 내가 저장 한 다음 사용자 정의가 headerRenderer를 사용 파일로 : myRightHeaderRenderer.mxml :

<?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" > 

<fx:Declarations> 
    <s:Label id="labelDisplay" 
      verticalCenter="1" left="0" right="0" top="0" bottom="0" 
      verticalAlign="middle" 
      maxDisplayedLines="1" 
      textAlign="right" 
      fontWeight="bold" 
      showTruncationTip="true" /> 
</fx:Declarations> 

</s:DefaultGridHeaderRenderer> 

이 사용자 지정 헤더 렌더러는 헤더 텍스트를 오른쪽 정렬합니다. 다음과 같이 사용하려면 스파크 데이터 그리드의 하나 이상의 열에에 추가 :

... 
<fx:Array> 
    <s:GridColumn ... /> 
    <s:GridColumn headerRenderer="myRightHeaderRenderer" ...> 
    <s:GridColumn ... /> 
    ... 
</fx:Array> 
... 

을 내가 할 방법을 잘 모르겠지만, 나는 그것이를 매개 변수화함으로써보다 유연하게 만들 수 있습니다 확신 해요 textAlign 속성을 center, left 또는 right으로 설정하십시오.

Answer 2

this blog post을 살펴보면 사용 방법을 알려주는 적당한 크기의 source code이 있습니다.

그러나 블로그의 예는 사용자가 필요로하는 것보다 훨씬 복잡하다고 생각합니다. 두려워 하듯이 사용자 정의 headerRenderer가 필요하지만 코드는 매우 간단해야합니다. 이 문제는 가볍게 테스트 한 것이므로 문제가 있으면 알려주십시오.

사용자 지정 헤더 렌더러 귀하의 열을 사용할 수

package 
{ 
    import spark.skins.spark.DefaultGridHeaderRenderer; 

    public class CustomGridHeader extends DefaultGridHeaderRenderer 
    { 
     public function CustomGridHeader() 
     { 
      super(); 
     } 

     public function set headerTextAlign(value:String):void 
     { 
      labelDisplay.setStyle("textAlign",value); 
      labelDisplay.styleChanged("textAlign"); 
     } 
    } 
} 

변수 ...

initialize 또는 preinitialize에

[Bindable] private var leftFactory:ClassFactory = new ClassFactory(CustomGridHeader); 
[Bindable] private var rightFactory:ClassFactory = new ClassFactory(CustomGridHeader); 
[Bindable] private var centerFactory:ClassFactory = new ClassFactory(CustomGridHeader); 

... 각 열에 대한

leftFactory.properties = {headerTextAlign: "left"}; 
rightFactory.properties = {headerTextAlign: "right"}; 
centerFactory.properties = {headerTextAlign: "center"}; 

...

<s:GridColumn headerText="..." headerRenderer="{centerFactory}"/>