Changing the appearance of the locked column separator skin for a DataGrid control in Flex 3
The following example shows how you can set the verticalLockedSeparatorSkin
style in MXML and ActionScript to control the appearance of the vertical locked separator skin when setting the lockedColumnCount
property on a Flex Datagrid control.
<?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[
import mx.events.ItemClickEvent;
[Bindable]
[Embed(source="assets.swf#BlankBar")]
private var blankBar:Class;
[Bindable]
[Embed(source="assets.swf#RedVBar")]
private var redVBar:Class;
[Bindable]
[Embed(source="assets.swf#GreyVBar")]
private var greyVBar:Class;
private function setVLockedSeparatorSkin(skin:Class):void {
dataGrid.setStyle("verticalLockedSeparatorSkin", skin);
}
private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
setVLockedSeparatorSkin(evt.item.data);
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object c1="1a" c2="1b" c3="1c" c4="1d" c5="1e" />
<mx:Object c1="2a" c2="2b" c3="2c" c4="2d" c5="2e" />
<mx:Object c1="3a" c2="3b" c3="3c" c4="3d" c5="3e" />
<mx:Object c1="4a" c2="4b" c3="4c" c4="4d" c5="4e" />
<mx:Object c1="5a" c2="5b" c3="5c" c4="5d" c5="5e" />
<mx:Object c1="6a" c2="6b" c3="6c" c4="6d" c5="6e" />
<mx:Object c1="7a" c2="7b" c3="7c" c4="7d" c5="7e" />
<mx:Object c1="8a" c2="8b" c3="8c" c4="8d" c5="8e" />
<mx:Object c1="9a" c2="9b" c3="9c" c4="9d" c5="9e" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:Array id="arr">
<mx:Object label="undefined (default)" data="{undefined}" />
<mx:Object label="red (0xFF0000)" data="{redVBar}" />
<mx:Object label="grey (0xCCCCCC)" data="{greyVBar}" />
<mx:Object label="blank" data="{blankBar}" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider="{arr}"
selectedIndex="1"
itemClick="toggleButtonBar_itemClick(event);" />
<mx:Spacer width="100%" />
<mx:CheckBox id="checkBox"
label="verticalGridLines:"
labelPlacement="left"
selected="true" />
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
horizontalScrollPolicy="on"
verticalScrollPolicy="on"
verticalGridLines="{checkBox.selected}"
verticalLockedSeparatorSkin="{redVBar}"
width="320"
rowCount="6"
lockedColumnCount="1">
<mx:columns>
<mx:DataGridColumn dataField="c1" />
<mx:DataGridColumn dataField="c2" />
<mx:DataGridColumn dataField="c3" />
<mx:DataGridColumn dataField="c4" />
<mx:DataGridColumn dataField="c5" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
10:09 AM
|
Labels:
Flex Controls Samples,
Flex DataGrid Samples
|
This entry was posted on 10:09 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.
0 comments:
Post a Comment