つれずれなるままの開発日記(最近はFlexばかり..)

« muninでhttpのレスポンスを監視する

flex:Treeで自動的にフォルダを展開させるには »

Flex mx:Tree上でcheckboxを表示する

2009/4/9

mx:Tree with checkbox

Tree上にチェックボックスを表示させるには・・・・

tree.itemRenderer = new IClassFactory(TreeCheckBoxRenderer);

のように、新たに作成するItemRendererを設定する。
次に、TreeCheckBoxRendererを実装。

class TreeCheckBoxRenderer extends TreeItemRenderer

のように、TreeItemRenderer を継承することがポイント！！

次に、ItemRendererのcreateChildren()メソッドでは

override protected function createChildren():void{
  super.createChildren();
  checkBox = new CheckBox();
  checkBox.setStyle("verticalAlign","middle");
  this.addChild(checkBox);
}

とする。要するにCheckBoxが追加できればいいのと、ここでは、setStyleでverticalAlignがmiddleのときしか考慮していない。

このままでは、表示する際にチェックボックスの位置がおかしい。
したがって、updateDisplayList()で位置を調整する。

CheckBoxの位置がおかしい

super.updateDisplayList(unscaledWidth,unscaledHeight);

  if(super.data){
    if(icon != null){
      checkBox.x = icon.x;
      icon.x = checkBox.x + checkBox.width + 20;
      label.x = icon.x + icon.width + 5;
   }
  else{
     checkBox.x = super.label.x;
     label.x = checkBox.x + checkBox.width + 20;
  }
checkBox.y = ( unscaledHeight - checkBox.height ) /2;
}

このあたりは、TreeItemRendererのメソッドを見れば参考になると思います。