关于Flex的DataGrid的应用拓展(一)
Flex的DataGrid是Flex软件开发过程中最重要的组件之一,但这个组件确实让大家既爱又恨。这个组件的代码非常多,要是连继承类算起来,总么也要上万行代码。因此,分享一些在工作中的一些小用途希望大家能喜欢。首先介绍一下如何设置header的的rollover颜色。在DataGrid中不能单独设置header的rollover颜色,只能设置一个和数据统一的rollover颜色。步骤如下:
(1)创建一个DataGrid继承类:
package{import mx.controls.DataGrid;import mx.core.mx_internal;use namespace mx_internal;/** * The color of the header background when the user rolls over the row. * * The default value for the Halo theme is <code>0xB2E1FF</code>. * The default value for the Spark theme is <code>0xCEDBEF</code>. * * @langversion 3.0 * @playerversion Flash 9 * @playerversion AIR 1.1 * @productversion Flex 3 */[Style(name="headerRollOverColor", type="uint", format="Color", inherit="yes")] public class headerDatagrid extends DataGrid{public function headerDatagrid(){super();headerClass=customDataGridHeader;}}}
package{import flash.display.Graphics;import flash.display.Sprite;import flash.events.MouseEvent;import mx.controls.dataGridClasses.DataGridColumn;import mx.controls.dataGridClasses.DataGridHeader;import mx.controls.listClasses.IListItemRenderer; public class customDataGridHeader extends DataGridHeader{public function customDataGridHeader(){super();} /** * override current style drawing,perpose: create new style for header's rollover. */ override protected function drawHeaderIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void{var g:Graphics = indicator.graphics;g.clear();if(color==getStyle("rollOverColor")&&getStyle("headerRollOverColor")){ color=getStyle("headerRollOverColor");}g.beginFill(color);g.drawRect(0, 0, width, height);g.endFill(); indicator.x = x;indicator.y = y;}}}
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"><s:layout><s:BasicLayout/></s:layout><fx:Declarations></fx:Declarations><fx:Style>@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";@namespace local "*"; mx|DataGrid{ headerRollOverColor:#ff0000; }</fx:Style><fx:Script><![CDATA[import mx.collections.ArrayCollection;[Bindable] public var collection:ArrayCollection = new ArrayCollection([ { "name1" : "上海", "selected":false}, { "name1":"黄浦", "selected":false }, { "name1":"浦东", "selected":true }, { "name1":"静安", "selected":false }, { "name1":"徐汇", "selected":false }, { "name1":"北京", "selected":false},{ "name1":"海淀", "selected":false }, { "name1":"朝阳", "selected":true }, { "name1":"丰台", "selected":false } ]); ]]></fx:Script><local:headerDatagrid width="300" id="datagrid" dataProvider="{collection}" ><local:columns><mx:DataGridColumn headerText="地区" dataField="name1" itemRenderer="datagridItemrender" ></mx:DataGridColumn><mx:DataGridColumn headerText="选择" dataField="selected"></mx:DataGridColumn></local:columns></local:headerDatagrid></s:Application>