DataGridの背景色を変える

fxugフォーラムにて質問があったので作ってみました。


BackgroundColorDataGrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="400" width="600">

   <mx:Script>
   <![CDATA[
      [Bindable]
      public var myDP:Array =
      [
         {name:"Aさん", balance:-400, age:15},
         {name:"Bさん", balance:100, age:16},
         {name:"Cさん", balance:350, age:17},
         {name:"Dさん", balance:500, age:18},
         {name:"Eさん", balance:-600, age:19}
      ] 
   ]]>
   </mx:Script>

   <mx:DataGrid id="myDG" dataProvider="{myDP}" >
      <mx:columns>
         <mx:DataGridColumn dataField="name" headerText="Name" itemRenderer="BackgroundColorItemRenderer" />
         <mx:DataGridColumn dataField="balance" headerText="Balance" itemRenderer="BackgroundColorColumnRenderer"/>
         <mx:DataGridColumn dataField="age" headerText="Age" />
      </mx:columns>
   </mx:DataGrid> 

</mx:Application>

BackgroundColorItemRenderer.as

package {
   import mx.controls.Label;
   import mx.controls.dataGridClasses.*;
   import mx.controls.DataGrid;
   import flash.display.Graphics;

   public class BackgroundColorItemRenderer extends Label
   {
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
         super.updateDisplayList(unscaledWidth, unscaledHeight);

         var g:Graphics = graphics;
         var grid:DataGrid = DataGrid(DataGridListData(listData).owner);

         if (data.balance >= 0)
         {
            g.beginFill(0x009900);
            g.drawRect(0, 0, unscaledWidth, unscaledHeight);
            g.endFill();
         } 
         else 
         {
            g.beginFill(0xFF0000);
            g.drawRect(0, 0, unscaledWidth, unscaledHeight);
            g.endFill();
         }
      }
   }
}

BackgroundColorColumnRenderer.as

package {
   import mx.controls.Label;
   import mx.controls.dataGridClasses.*;
   import mx.controls.DataGrid;
   import flash.display.Graphics;

   public class BackgroundColorColumnRenderer extends Label
   {
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
         super.updateDisplayList(unscaledWidth, unscaledHeight);

         var g:Graphics = graphics;
         var grid:DataGrid = DataGrid(DataGridListData(listData).owner);


         g.beginFill(0xCCCCCC);
         g.drawRect(0, 0, unscaledWidth, unscaledHeight);
         g.endFill();

      }
   }
}

以下はネタもとです。


Creating A Background Color Renderer
http://www.forta.com/blog/index.cfm/2006/6/8/Creating-A-Background-Color-Renderer