FlexのDataGridで行の色を変更する方法

1626 ワード

1.新しいクラスを定義し、srcの下に配置します(デフォルトpackage):
package
{
  import flash.display.Sprite;
  
  import mx.collections.ArrayCollection;
  import mx.controls.DataGrid;

  public class RowColorDataGrid extends DataGrid
  {
    public var rowColorFunction:Function;
    
    override protected function drawRowBackground(
      s:Sprite, rowIndex:int, y:Number, height:Number, 
      color:uint, dataIndex:int):void
    {
      if(rowColorFunction != null) 
      {
        var item:Object;
        if(dataIndex < dataProvider.length)
        {
          item = dataProvider[dataIndex];
        }
        
        if(item)
        {
          color = 
            rowColorFunction(item, rowIndex, dataIndex, color);
        }
      }
      
      super.drawRowBackground(
        s, rowIndex, y, height, color, dataIndex);
    }
  }
}

2.この新しいコンポーネントをMXMLファイルで使用します.
<local:RowColorDataGrid left="col1:20" right="col2:20" top="row2:25" bottom="row2:25" id="filesDG" rowColorFunction="calcRowColor"/>

3.同時にMXMLファイルに関数calcRowColorを追加して、色を変更するロジックを定義します.
   private  function calcRowColor(item:Object, rowIndex:int,
                                  dataIndex:int, color:uint):uint {
	   if(rowIndex==0)
	       return 0xEE2233;
	   else
	       return color;
   }