Search Flex Samples

Styling the Flex DataGrid control using a custom separator skins

The following example demonstrates how you can customize the Flex 3 DataGrid control by specifying a custom skin for the horizontalSeparatorSkin and verticalSeparatorSkin styles.

These styles were added in Flex 3 and will not work with Flex 2.0.1.




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Script>

<![CDATA[

[Bindable]

[Embed(source="./assets/redbluebar.gif")]

private var RedBlueBar:Class;



[Bindable]

[Embed(source="./assets/greencircle.png")]

private var GreenCircle:Class;

]]>

</mx:Script>



<mx:Style>

.centered {

fontWeight: bold;

textAlign: center;

}

</mx:Style>



<mx:Array id="arr">

<mx:Object country="USA"

gold="35"

silver="39"

bronze="29" />

<mx:Object country="China"

gold="32"

silver="17"

bronze="14" />

<mx:Object country="Russia"

gold="27"

silver="27"

bronze="38" />

</mx:Array>



<mx:ApplicationControlBar dock="true">

<mx:CheckBox id="hGridLines"

label="horizontalGridLines"

selected="true" />



<mx:Spacer width="50" />



<mx:CheckBox id="vGridLines"

label="verticalGridLines"

selected="true" />

</mx:ApplicationControlBar>



<mx:DataGrid id="dataGrid"

dataProvider="{arr}"

headerStyleName="centered"

headerSeparatorSkin="{GreenCircle}"

horizontalSeparatorSkin="{RedBlueBar}"

horizontalGridLines="{hGridLines.selected}"

verticalSeparatorSkin="{RedBlueBar}"

verticalGridLines="{vGridLines.selected}">

<mx:columns>

<mx:DataGridColumn dataField="country"

headerText="Country:"

textAlign="left" />

<mx:DataGridColumn dataField="gold"

headerText="Gold:"

textAlign="right" />

<mx:DataGridColumn dataField="silver"

headerText="Silver:"

textAlign="right" />

<mx:DataGridColumn dataField="bronze"

headerText="Bronze:"

textAlign="right" />

</mx:columns>

</mx:DataGrid>

</mx:Application>



0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples