3

Sparkデータグリッドに10個の列があり、一部のヘッダーを左揃え、一部のヘッダーを右揃え、一部を中央揃えにする必要がある場合、これを実現する最も簡単な方法は何ですか？

カスタムheaderRendererが必要であると仮定して、それを説明できる簡単な例はありますか？

コメントありがとうございます。

4

2 に答える 2

4

これを解決するために私が見つけることができる最も簡単な方法は、このリンクで説明されているように、sparkDefaultGridHeaderRendererの設定をオーバーライドすることです。

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>

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

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

方法はわかりませんが、textAlign属性を、、、またはにパラメータ化することで、より柔軟にできると確信してcenterいleftますright。

于 2012-05-03T16:27:21.493 に答える
2

このブログ投稿を見ると、これを行う方法を示すかなりの量のソースコードが利用可能です。

ただし、ブログの例は、必要以上に複雑だと思います。恐れていたように、カスタムの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");
        }
    }
}

列で使用可能な変数...

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

オンinitializeまたはpreinitialize...

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

各列について...

<s:GridColumn headerText="..." headerRenderer="{centerFactory}"/>
于 2012-05-02T20:22:03.570 に答える