Flex Datagrid 三类背景色设定

本文主要是介绍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> 
                      <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>
                   <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>