Flex datagrid headerColor style is not working

I am trying to change the datagrid header color by editing headerColor style. I could change the font size, font family...etc except the headerColor. Would someone help me about it? Thanks a lot.

My code

Mxml

<mx:DataGrid id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{cityinfoResult3.lastResult}">
<mx:columns>
<mx:DataGridColumn headerText="Detail" dataField="detail"/>
<mx:DataGridColumn headerText="Name" dataField="name"/>
</mx:columns>
</mx:DataGrid>

Style

#dataGrid{
headerColors: #ff6600;    //everything works except this one. The color can't be                  
                          //changed?
rollOverColor: #33ccff;
textRollOverColor: #ffffff;
iconColor: #ff0000;
fontFamily: Arial;
fontSize:12;
dropShadowEnabled: true;
alternatingItemColors: #33009开发者_开发百科9, #0000cc;
color: #ffffff;
borderColor: #ffffff;
}

---

headerColors needs an array of 2 items in order to draw a gradient. If you want a solid color, I bet something likethis would work:

headerColors: #ff6600, #ff6600 ; 

---

In Flex's CSS, you don't want the [] brackets around your values (though you would want them if you were doing this in straight-up ActionScript).

This should do the trick:

headerColors: #ff6600, #ff6600;

---

For an mx DataGrid, create a new skin mxml (s:SparkSkin) and copy the mx.skins.spark.DataGridHeaderBackgroundSkin code into your custom skin class.

Find the code snippet below and replace the values with your chosen colours.

<!-- layer 2: fill -->
<s:Rect left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0xFFFFFF" 
                             alpha="0.85" />
            <s:GradientEntry color="0xD8D8D8" 
                             alpha="0.85" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

In your DataGrid component, point the header background skin to your custom skin:

<mx:DataGrid id="dataGrid" headerBackgroundSkin="assets.skins.CustomDataGridSkin">

---

Try this

dataGrid.setStyle("headerColors", ["red", "blue"]);