フレックス：どのようにSparkのデータグリッドヘッダーテキストの配置を制御する？

Question

Spark DataGridに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> 

このカスタムヘッダーレンダラーは、ヘッダーテキストを右揃えにします。次のようにそれを使用するには、スパークのDataGridの1つ以上の列に追加します。

... 
<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}"/>