2

この問題についてサポートが必要です。ヘッダーの色を変更する必要があります。以下は機能しません。

column.setStyle(StyleNames.HEADER_COLORS, "#FF7F00");
4

1 に答える 1

4

で 1 つの列のヘッダーだけの背景色を設定する簡単な方法はありませんAdvancedDataGrid。ヘッダーにはカスタム レンダラーを使用する必要があります。

使用法

<fx:Style>
    .yellowHeaderStyle {
        backgroundColor: yellow;
        backgroundAlpha: 1.0;
    }
</fx:Style>

<mx:AdvancedDataGrid dataProvider="{dataProvider}">
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="firstname" headerText="Firstname" />
        <mx:AdvancedDataGridColumn dataField="lastname" headerText="Lastname"
            headerRenderer="com.example.ColoredHeaderRenderer" headerStyleName="yellowHeaderStyle" />
    </mx:columns>
</mx:AdvancedDataGrid>

ColoredHeaderRenderer

package com.example
{
    import mx.controls.AdvancedDataGrid;
    import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
    import mx.controls.listClasses.BaseListData;

    [Style(name="backgroundColor", type="uint", format="Color")]
    [Style(name="backgroundAlpha", type="Number")]

    /**
     * The ColoredHeaderRenderer extends the default header renderer for a AdvancedDataGrid
     * control and adds styles for chaning the backgroundColor and backgroundAlpha.
     * 
     * <p>Both styles (backgroundColor and backgroundAlpha) must me set.</p>  
     */
    public class ColoredHeaderRenderer extends AdvancedDataGridHeaderRenderer
    {
        private var grid:AdvancedDataGrid;

        override public function set listData(value:BaseListData):void
        {
            super.listData = value;
            grid = AdvancedDataGrid(value.owner);
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if (background)
            {
                background.graphics.clear();
                background.graphics.beginFill(getStyle("backgroundColor"), getStyle("backgroundAlpha"));

                // The function AdvancedDataGridBase.createHeaders() adds a padding to the top
                // and bottom of the HeaderRenderer. Let's undo this...
                background.graphics.drawRect(0, 0 - grid.getStyle("paddingTop"), unscaledWidth,
                    unscaledHeight + grid.getStyle("paddingTop") + grid.getStyle("paddingBottom") - 1);
                background.graphics.endFill();
            }
        }
    }
}
于 2013-03-01T21:28:21.357 に答える