DataGrid背景颜色设置

DataGrid颜色专题

在Flex运用中经常提到的有关DataGrid问题是如何改变DataGrid单元格(cell)，列(column)和行(row)的背景颜色(backgroundcolor)
这里对这3种颜色做一个总结。

 

1. 设置行(row)的背景色

 

主要是通过对DataGrid扩展，对protected函数drawRowBackground()进行重写，具体代码如下：

package com { import flash.display.Sprite; import mx.collections.ArrayCollection; import mx.controls.DataGrid; public class SQDataGrid extends DataGrid { public function SQDataGrid() { super(); } protected override function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void { if(dataProvider&&dataIndex < (dataProvider as ArrayCollection).length) { //代码判断出可以取dataProvider 的数据来判断要改变什么颜色 var item:Object = (dataProvider as ArrayCollection).getItemAt(dataIndex); if( item[2] > item[9] ){color=0xFF0000;} } super.drawRowBackground(s,rowIndex,y,height,color,dataIndex); } } }

 

这段代码中根据DataGrid的数据源进行判断来设置背景色，但是它有个缺陷，就是这个具体的背景色我们无法自己灵活指定。因此派生出新的CustomRowColorDataGrid，具体代码如下：

package cwmlab.controls { import mx.controls.*; import flash.display.Shape; import mx.core.FlexShape; import flash.display.Graphics; import flash.display.Sprite; import mx.rpc.events.AbstractEvent; import mx.collections.ArrayCollection; import flash.events.Event; /** * This is an extended version of the built-in Flex datagrid. * This extended version has the correct override logic in it * to draw the background color of the cells, based on the value of the * data in the row. **/ public class CustomRowColorDataGrid extends DataGrid { private var _rowColorFunction:Function; public function CustomRowColorDataGrid() { super(); } /** * A user-defined function that will return the correct color of the * row. Usually based on the row data. * * expected function signature: * public function F(item:Object, defaultColor:uint):uint **/ public function set rowColorFunction(f:Function):void { this._rowColorFunction = f; } public function get rowColorFunction():Function { return this._rowColorFunction; } /** * Draws a row background * at the position and height specified using the * color specified. This implementation creates a Shape as a * child of the input Sprite and fills it with the appropriate color. * This method also uses the <code>backgroundAlpha</code> style property * setting to determine the transparency of the background color. * * @param s A Sprite that will contain a display object * that contains the graphics for that row. * * @param rowIndex The row's index in the set of displayed rows. The * header does not count, the top most visible row has a row index of 0. * This is used to keep track of the objects used for drawing * backgrounds so a particular row can re-use the same display object * even though the index of the item that row is rendering has changed. * * @param y The suggested y position for the background * @param height The suggested height for the indicator * @param color The suggested color for the indicator * * @param dataIndex The index of the item for that row in the * data provider. This can be used to color the 10th item differently * for example. */ override protected function drawRowBackground(s:Sprite,rowIndex:int,y:Number, height:Number, color:uint, dataIndex:int):void { if( this.rowColorFunction != null ){ if( dataIndex < this.dataProvider.length ){ var item:Object = this.dataProvider.getItemAt(dataIndex); color = this.rowColorFunction.call(this, item, color); } } super.drawRowBackground(s, rowIndex, y, height, color, dataIndex); } } }

 

在具体使用过程中可以这样调用：

<cwmlab:CustomRowColorDataGrid dataProvider="{dp}" rowColorFunction="setCustomColor"> private function setCustomColor(item:Object, color:uint):uint { if( item['col3'] >= 2000 ) { return 0xFF0033; } return color; }

 

2. 设置DataGrid列的背景色

这个很简单，只要设置DataGridColumn的属性backgroundColor="0x0000CC"即可。

   3. 设置DataGrid单元格(cell)的背景色

这个主要通过itemRenderer进行设置，itemRenderer可以是Label，也可以是其他如DataGridItemRenderer。

先看看用Label如何设置背景色

<mx:DataGridColumn headerText="Make" dataField="col1"> <mx:itemRenderer> <mx:Component> <mx:Label> <!--using label as itemRenderer--> <mx:Script><!--[CDATA[ override public function set data(value:Object):void { super.data = value; if(value.col1 == 'Toyota'){ this.opaqueBackground =0xCC0000; } } ]]--></mx:Script> </mx:Label> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn>

 

用DataGridItemRenderer进行背景色设置如下：

<mx:DataGridColumn headerText="Year" dataField="col3"> <mx:itemRenderer> <mx:Component> <mx:DataGridItemRenderer><!--using DataGridItemRenderer as itemRenderer--> <mx:Script><!--[CDATA[ override public function set data(value:Object):void { super.data = value; if(value.col3 >= 2000){ this.background = true; this.backgroundColor =0x00cc00; } } ]]--></mx:Script> </mx:DataGridItemRenderer> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn>