apache-flex - 在 AdvancedDataGrid 中设置一列的标题颜色不起作用

Question

在这个问题上需要帮助。我需要更改标题颜色。以下不起作用：

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

Answer 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();
            }
        }
    }
}