<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="DataGrid_headerStyleName_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                var styleName:String = "." + dataGrid.getStyle("headerStyleName");
                var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration(styleName);
                cssDecl.setStyle("textAlign", value);
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp" source="data/products.xml" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textAlign:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[left,center,right,justify]"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{dp.product}"
            rowCount="5"
            verticalScrollPolicy="on"
            width="300">
        <mx:columns>
            <mx:DataGridColumn id="dataGridColumn1"
                    dataField="@name"
                    headerText="This is a column with a long title:"
                    headerWordWrap="true"
                    minWidth="80" />
            <mx:DataGridColumn id="dataGridColumn2"
                    dataField="@price"
                    headerText="Price:"
                    headerWordWrap="false"
                    minWidth="20" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>