Flex Datagrid 三类背景色设定
在Flex运用中经常提到的有关DataGrid问题是如何改变DataGrid单元格(cell)，列(column)和行(row)的背景颜色(backgroundcolor)
这里对这3种颜色做一个总结。
1. 设置行(row)的背景色
主要是通过对DataGrid扩展，对protected函数drawRowBackground()进行重写，具体代码如下：
override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number,color:uint, dataIndex:int):void
{
if (dataIndex >= dataProvider.length) {
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
return;
}
if (dataProvider.getItemAt(dataIndex).col3 < 2000) {//set color accordint to datas
super.drawRowBackground(s,rowIndex,y,height,0xC0C0C0,dataIndex);
} else {
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>
