Flex中固定DataGrid控件的横(horizontal)，竖(vertical)网格线风格的例子
By Minidxer | March 30, 2008
这是一个小技巧，Flex使得自定义DataGrid控件的横(horizontal)，竖(vertical)网格线外观风格变得非常轻松。接下来的例子演示了如何将开启或者关闭DataGrid的horizontalGridLines和verticalGridLines风格，改变网格原本交互的背景颜色为白色，将horizontalGridLineColor和verticalGridLineColor设为红色。
下面用两个CheckBox来控制horizontalGridLines和verticalGridLines。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：
下面是完整代码(或点击这里察看)：
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white">
- <mx:Array id="arr">
- <mx:Object label="item 1" data="1" />
- <mx:Object label="item 2" data="2" />
- <mx:Object label="item 3" data="3" />
- <mx:Object label="item 4" data="4" />
- <mx:Object label="item 5" data="5" />
- <mx:Object label="item 6" data="6" />
- <mx:Object label="item 7" data="7" />
- <mx:Object label="item 8" data="8" />
- <mx:Object label="item 9" data="9" />
- <mx:Object label="item 0" data="0" />
- </mx:Array>
- <mx:ArrayCollection id="arrColl" source="{arr}" />
- <mx:DataGrid id="dataGrid"
- dataProvider="{arrColl}"
- alternatingItemColors="[white]"
- rowCount="6"
- horizontalGridLines="{hGL.selected}"
- verticalGridLines="{vGL.selected}"
- horizontalGridLineColor="red"
- verticalGridLineColor="red">
- <mx:columns>
- <mx:DataGridColumn id="labelCol" dataField="label" />
- <mx:DataGridColumn id="dataCol" dataField="data" />
- </mx:columns>
- </mx:DataGrid>
- <mx:CheckBox id="hGL" label="horizontalGridLines" selected="true" />
- <mx:CheckBox id="vGL" label="verticalGridLines" selected="true" />
- </mx:Application>
代码：Peter deHaan 翻译：minidxer
Topics:
Flex |
Tags: alternatingItemColors, DataGrid, Flex, horizontal, horizontalGridLines, vertical, verticalGridLines