Flex_ActionScript_MXML/tips/Datagridの任意の行の背景色を変えたい - 豚吐露＠wiki

---

Datagridの任意の行の背景色を変えたい

---

WindowsXP
Flex SDK 4.1.0

---

SDKの中のDatagridのsourceを見ると...

%FlashBuilderHome%\sdks\4.1.0\frameworks\projects\framework\src\mx\controls\DataGrid.as

こんな関数がある。

protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
{
  var contentHolder:ListBaseContentHolder = ListBaseContentHolder(s.parent);
 
  var background:Shape;
  if (rowIndex < s.numChildren)
  {
    background = Shape(s.getChildAt(rowIndex));
  }
  else
  {
    background = new FlexShape();
    background.name = "background";
    s.addChild(background);
  }
 
  background.y = y;
 
  var height:Number = Math.min(height, contentHolder.height - y);
 
  var g:Graphics = background.graphics;
  g.clear();
  g.beginFill(color, getStyle("backgroundAlpha"));
  g.drawRect(0, 0, contentHolder.width, height);
  g.endFill();
}
 

引数の意味は...

s	対象のスプライト
rowIndex	実際に表示されている行のIndex
y	描画エリアの高さ
height	1行の高さ
color	当該行のデフォルト背景色
dataIndex	rowIndexの行に表示されるデータ配列のIndex

です。
で、実際に色を決めてるのは23行目の

g.beginFill(color, getStyle("backgroundAlpha"));

のcolor。
デフォルトではこのメソッドに1行毎に白と薄青っぽぃ色が飛んでくる。
なので、この色設定の近辺をいじれば任意の条件で背景色を変えられる。

やるとしたらDatagridを継承したクラスを作って、drawRowBackground()をoverride。
こんな感じにすると、任意の条件で任意の行の背景色を変えられる。

protected override function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
{
  var contentHolder:ListBaseContentHolder = ListBaseContentHolder(s.parent);
 
  var background:Shape;
  if (rowIndex < s.numChildren)
  {
    background = Shape(s.getChildAt(rowIndex));
  }
  else
  {
    background = new FlexShape();
    background.name = "background";
    s.addChild(background);
  }
 
  background.y = y;
 
  var height:Number = Math.min(height, contentHolder.height - y);
 
  var g:Graphics = background.graphics;
  g.clear();
 
  var list:ArrayCollection = dataProvider as ArrayCollection;
  if (list) {
    var dt:HogehogeRow = list.getItemAt(dataIndex) as HogehogeRow;
    if (dt) {
      if (dt.redFlg) {
        // 赤くしたいフラグがONだったら背景色を赤に設定
        g.beginFill(0xFF0000, getStyle("backgroundAlpha"));
      } else {
        // 赤くしたいフラグがOFFだったら背景色をデフォルトカラー
        g.beginFill(color, getStyle("backgroundAlpha"));
      }
    } else {
      // キャスト失敗でデフォルトカラー
      g.beginFill(color, getStyle("backgroundAlpha"));
    }
  } else {
    // dataProviderが無かったらデフォルトカラー
    g.beginFill(color, getStyle("backgroundAlpha"));
  }
  g.drawRect(0, 0, contentHolder.width, height);
  g.endFill();
}
 

当然、HogehogeRowとかredFlgとかは自分の環境に合わせて書き換える。

このコードで直接コンパイルしとらんけど、動いとるコードを置き換えたりして作ったコードなんで大丈夫のハズ。

---

更新日： 2011年06月02日 (木) 20時11分23秒