Flex中如何利用verticalLockedSeparatorSkin样式设置Datagrid竖直方向分割线颜色的例子

By Minidxer | December 30, 2008

接下来的例子演示了Flex中如何利用verticalLockedSeparatorSkin样式，设置Datagrid竖直方向分割线颜色。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.events.ItemClickEvent;
  10.  
  11.             [Bindable]
  12.             [Embed(source="assets.swf#BlankBar")]
  13.             private var blankBar:Class;
  14.  
  15.             [Bindable]
  16.             [Embed(source="assets.swf#RedVBar")]
  17.             private var redVBar:Class;
  18.  
  19.             [Bindable]
  20.             [Embed(source="assets.swf#GreyVBar")]
  21.             private var greyVBar:Class;
  22.  
  23.             private function setVLockedSeparatorSkin(skin:Class):void {
  24.                 dataGrid.setStyle("verticalLockedSeparatorSkin", skin);
  25.             }
  26.  
  27.             private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
  28.                 setVLockedSeparatorSkin(evt.item.data);
  29.             }
  30.         ]]>
  31.     </mx:Script>
  32.  
  33.     <mx:ArrayCollection id="arrColl">
  34.         <mx:source>
  35.             <mx:Array>
  36.                 <mx:Object c1="1a" c2="1b" c3="1c" c4="1d" c5="1e" />
  37.                 <mx:Object c1="2a" c2="2b" c3="2c" c4="2d" c5="2e" />
  38.                 <mx:Object c1="3a" c2="3b" c3="3c" c4="3d" c5="3e" />
  39.                 <mx:Object c1="4a" c2="4b" c3="4c" c4="4d" c5="4e" />
  40.                 <mx:Object c1="5a" c2="5b" c3="5c" c4="5d" c5="5e" />
  41.                 <mx:Object c1="6a" c2="6b" c3="6c" c4="6d" c5="6e" />
  42.                 <mx:Object c1="7a" c2="7b" c3="7c" c4="7d" c5="7e" />
  43.                 <mx:Object c1="8a" c2="8b" c3="8c" c4="8d" c5="8e" />
  44.                 <mx:Object c1="9a" c2="9b" c3="9c" c4="9d" c5="9e" />
  45.             </mx:Array>
  46.         </mx:source>
  47.     </mx:ArrayCollection>
  48.  
  49.     <mx:Array id="arr">
  50.         <mx:Object label="undefined (default)" data="{undefined}" />
  51.         <mx:Object label="red (0xFF0000)" data="{redVBar}" />
  52.         <mx:Object label="grey (0xCCCCCC)" data="{greyVBar}" />
  53.         <mx:Object label="blank" data="{blankBar}" />
  54.     </mx:Array>
  55.  
  56.     <mx:ApplicationControlBar dock="true">
  57.         <mx:ToggleButtonBar id="toggleButtonBar"
  58.                 dataProvider="{arr}"
  59.                 selectedIndex="1"
  60.                 itemClick="toggleButtonBar_itemClick(event);" />
  61.  
  62.         <mx:Spacer width="100%" />
  63.  
  64.         <mx:CheckBox id="checkBox"
  65.                 label="verticalGridLines:"
  66.                 labelPlacement="left"
  67.                 selected="true" />
  68.     </mx:ApplicationControlBar>
  69.  
  70.     <mx:DataGrid id="dataGrid"
  71.             dataProvider="{arrColl}"
  72.             horizontalScrollPolicy="on"
  73.             verticalScrollPolicy="on"
  74.             verticalGridLines="{checkBox.selected}"
  75.             verticalLockedSeparatorSkin="{redVBar}"
  76.             width="320"
  77.             rowCount="6"
  78.             lockedColumnCount="1">
  79.         <mx:columns>
  80.             <mx:DataGridColumn dataField="c1" />
  81.             <mx:DataGridColumn dataField="c2" />
  82.             <mx:DataGridColumn dataField="c3" />
  83.             <mx:DataGridColumn dataField="c4" />
  84.             <mx:DataGridColumn dataField="c5" />
  85.         </mx:columns>
  86.     </mx:DataGrid>
  87.  
  88. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DataGrid | No Comments » | Tags: , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll