Flex中通过horizontalSeparatorSkin和verticalSeparatorSkin对DataGrid的样式进行自定义的例子

By Minidxer | August 17, 2008

接下来的例子演示了Flex中如何通过horizontalSeparatorSkin和verticalSeparatorSkin样式，对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.             [Bindable]
  10.             [Embed(source="./assets/redbluebar.gif")]
  11.             private var RedBlueBar:Class;
  12.  
  13.             [Bindable]
  14.             [Embed(source="./assets/greencircle.png")]
  15.             private var GreenCircle:Class;
  16.         ]]>
  17.     </mx:Script>
  18.  
  19.     <mx:Style>
  20.         .centered {
  21.             fontWeight: bold;
  22.             textAlign: center;
  23.         }
  24.     </mx:Style>
  25.  
  26.     <mx:Array id="arr">
  27.         <mx:Object country="USA"
  28.                 gold="35"
  29.                 silver="39"
  30.                 bronze="29" />
  31.         <mx:Object country="China"
  32.                 gold="32"
  33.                 silver="17"
  34.                 bronze="14" />
  35.         <mx:Object country="Russia"
  36.                 gold="27"
  37.                 silver="27"
  38.                 bronze="38" />
  39.     </mx:Array>
  40.  
  41.     <mx:ApplicationControlBar dock="true">
  42.         <mx:CheckBox id="hGridLines"
  43.                 label="horizontalGridLines"
  44.                 selected="true" />
  45.  
  46.         <mx:Spacer width="50" />
  47.  
  48.         <mx:CheckBox id="vGridLines"
  49.                 label="verticalGridLines"
  50.                 selected="true" />
  51.     </mx:ApplicationControlBar>
  52.  
  53.     <mx:DataGrid id="dataGrid"
  54.             dataProvider="{arr}"
  55.             headerStyleName="centered"
  56.             headerSeparatorSkin="{GreenCircle}"
  57.             horizontalSeparatorSkin="{RedBlueBar}"
  58.             horizontalGridLines="{hGridLines.selected}"
  59.             verticalSeparatorSkin="{RedBlueBar}"
  60.             verticalGridLines="{vGridLines.selected}">
  61.         <mx:columns>
  62.             <mx:DataGridColumn dataField="country"
  63.                     headerText="Country:"
  64.                     textAlign="left" />
  65.             <mx:DataGridColumn dataField="gold"
  66.                     headerText="Gold:"
  67.                     textAlign="right" />
  68.             <mx:DataGridColumn dataField="silver"
  69.                     headerText="Silver:"
  70.                     textAlign="right" />
  71.             <mx:DataGridColumn dataField="bronze"
  72.                     headerText="Bronze:"
  73.                     textAlign="right" />
  74.         </mx:columns>
  75.     </mx:DataGrid>
  76.  
  77. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | 1 Comment » | Tags: , , , , ,

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

One comment | Add One

  1. 小新 - 06/9/2010 at 2:13 pm

    关于这个datagrid的样式，分隔线，好像只能拉长，不能分别放到各行或者各列中。一根短线做垂直分隔线，出来以后便是一根长线。

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll