Flex Examples » ProgrammaticSkin http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Removing the sort arrow skin from an MX DataGrid control in Flex http://blog.flexexamples.com/2010/02/26/removing-the-sort-arrow-skin-from-an-mx-datagrid-control-in-flex/ http://blog.flexexamples.com/2010/02/26/removing-the-sort-arrow-skin-from-an-mx-datagrid-control-in-flex/#comments Fri, 26 Feb 2010 20:47:57 +0000 Peter deHaan http://blog.flexexamples.com/?p=2530 In a previous example, “Changing the default sort arrow skin on a Flex DataGrid control”, we saw how you could change the sort arrow skin on a DataGrid control in Flex by setting the sortArrowSkin style.

The following example shows how you can remove the sort arrow skin from an MX DataGrid control in [...]]]> In a previous example, “Changing the default sort arrow skin on a Flex DataGrid control”, we saw how you could change the sort arrow skin on a DataGrid control in Flex by setting the sortArrowSkin style.

The following example shows how you can remove the sort arrow skin from an MX DataGrid control in Flex by setting the sortArrowSkin style to the mx.skins.ProgrammaticSkin class.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/26/removing-the-sort-arrow-skin-from-an-mx-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_sortArrowSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:DataGrid id="dGrid" sortArrowSkin="mx.skins.ProgrammaticSkin">
        <mx:columns>
            <mx:DataGridColumn dataField="c1" />
            <mx:DataGridColumn dataField="c2" />
            <mx:DataGridColumn dataField="c3" />
        </mx:columns>
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object c1="row1, col1" c2="row1, col2" c3="row1, col3" />
                <mx:Object c1="row2, col1" c2="row2, col2" c3="row2, col3" />
                <mx:Object c1="row3, col1" c2="row3, col2" c3="row3, col3" />
                <mx:Object c1="row4, col1" c2="row4, col2" c3="row4, col3" />
                <mx:Object c1="row5, col1" c2="row5, col2" c3="row5, col3" />
                <mx:Object c1="row6, col1" c2="row6, col2" c3="row6, col3" />
                <mx:Object c1="row7, col1" c2="row7, col2" c3="row7, col3" />
                <mx:Object c1="row8, col1" c2="row8, col2" c3="row8, col3" />
                <mx:Object c1="row9, col1" c2="row9, col2" c3="row9, col3" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:DataGrid>
 
</mx:Application>

View source is enabled in the following example.


You can also set the sortArrowSkin style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/26/removing-the-sort-arrow-skin-from-an-mx-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_sortArrowSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        DataGrid {
            sortArrowSkin: ClassReference("mx.skins.ProgrammaticSkin");
        }
    </mx:Style>
 
    <mx:DataGrid id="dGrid">
        <mx:columns>
            <mx:DataGridColumn dataField="c1" />
            <mx:DataGridColumn dataField="c2" />
            <mx:DataGridColumn dataField="c3" />
        </mx:columns>
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object c1="row1, col1" c2="row1, col2" c3="row1, col3" />
                <mx:Object c1="row2, col1" c2="row2, col2" c3="row2, col3" />
                <mx:Object c1="row3, col1" c2="row3, col2" c3="row3, col3" />
                <mx:Object c1="row4, col1" c2="row4, col2" c3="row4, col3" />
                <mx:Object c1="row5, col1" c2="row5, col2" c3="row5, col3" />
                <mx:Object c1="row6, col1" c2="row6, col2" c3="row6, col3" />
                <mx:Object c1="row7, col1" c2="row7, col2" c3="row7, col3" />
                <mx:Object c1="row8, col1" c2="row8, col2" c3="row8, col3" />
                <mx:Object c1="row9, col1" c2="row9, col2" c3="row9, col3" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:DataGrid>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/02/26/removing-the-sort-arrow-skin-from-an-mx-datagrid-control-in-flex/feed/ 4