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> |
10:33 AM
|
Labels:
Flex Controls Samples,
Flex DataGrid Samples
|
This entry was posted on 10:33 AM
and is filed under
Flex Controls Samples
,
Flex DataGrid Samples
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment