flライブラリのDataGridコンポーネントのセルにComboBoxを使用する方法

flライブラリのDataGridは非常に中途半端な実装です。

自前で用意するのは面倒なので使っていますが、TextField以外の編集可能セルを実装する方法が分かりませんでした。

公式のドキュメントを調べると、CellRendererクラスを継承すれば既存のコンポーネントを埋め込むことができることが分かりました。

他に同じようなことをしている方がいないか、ネットで調べてみましたが公式のソースそのままというのがほとんどでした。

仕方ないので自分でサンプルを作成することにしました。

アプリケーション

package  
{
  // SYSTEM PACKAGE
  import flash.display.Sprite;
  import fl.controls.DataGrid;
  import fl.controls.dataGridClasses.DataGridColumn;
  import fl.controls.ComboBox;
  
  public class CellRendererSample extends Sprite
  {
    private var mDataGrid:DataGrid;
    
    public function CellRendererSample() 
    {
      // DataGrid作成
      mDataGrid = new DataGrid;
      mDataGrid.width = stage.stageWidth;
      mDataGrid.height = stage.stageHeight;
      
      // 編集・ソート不可
      mDataGrid.editable = false;
      mDataGrid.sortableColumns = false;
      
      // 列を作成
      var dgc1:DataGridColumn = new DataGridColumn("名前");
      var dgc2:DataGridColumn = new DataGridColumn("ホトトギス");
      dgc2.cellRenderer = CustomComboBox;
      
      // 列を追加
      mDataGrid.addColumn(dgc1);
      mDataGrid.addColumn(dgc2);
      
      // コンボボックスのデータを作成
      var data_array:Array = new Array();
      data_array.push({"label": "殺す", "data": 1});
      data_array.push({"label": "鳴かす", "data": 2});
      data_array.push({"label": "待つ", "data": 2});
      
      // 行を追加
      mDataGrid.addItem({"名前": "織田信長", "ホトトギス": data_array});
      mDataGrid.addItem({"名前": "豊臣秀吉", "ホトトギス": data_array});
      mDataGrid.addItem({"名前": "徳川家康", "ホトトギス": data_array});
      addChild(mDataGrid);
    }
  }
}

コンポーネント

package  
{
  // SYSTEM PACKAGE
  import flash.events.Event;
  import fl.controls.DataGrid;
  import fl.controls.dataGridClasses.DataGridColumn;
  import fl.controls.ComboBox;
  import fl.controls.listClasses.ICellRenderer;
  import fl.controls.listClasses.ListData;
  import fl.data.DataProvider;
  
  public class CustomComboBox extends ComboBox implements ICellRenderer 
  {
    // セル情報の保持
    private var mList_data:ListData;
    
    // データの保持
    private var mData:Object;
    
    // 選択状態の保持(set/getはICellRendererにて強制定義)
    private var mIs_selected:Boolean;
    public function get selected():Boolean { return mIs_selected; }
    public function set selected(value:Boolean):void { mIs_selected = value; }
    
    public function CustomComboBox() 
    {
      super();
      
      // 選択時イベントリスナを設定
      addEventListener(Event.CHANGE, ListenerComboChange);
    }
    
    // ICellRendererにて強制定義
    public function get listData():ListData 
    {
      return mList_data;
    }
    
    // ICellRendererにて強制定義
    public function set listData(value:ListData):void 
    {
      // セル情報取得
      mList_data = value;
      
      // DataProviderの初期設定
      if (dataProvider.length <= 0) {
        var dg:DataGrid = mList_data.owner as DataGrid;
        var dgc:DataGridColumn = dg.getColumnAt(mList_data.column);
        var data_array:Array = mData[dgc.headerText] as Array;
        this.dataProvider = new DataProvider(data_array);
      }
    }
    
    // ICellRendererにて強制定義
    public function get data():Object 
    {
      return dataProvider;
    }
    
    // ICellRendererにて強制定義(addItem時に実行)
    public function set data(data:Object):void 
    {
      mData = data;
    }
        
    // ICellRendererにて強制定義
    public function setMouseState(state:String):void
    {
    }
    
    // 選択時イベントリスナｓ
    public function ListenerComboChange(evt:Event):void
    {
      // コンボボックスの値を確認
      var combo:CustomComboBox = evt.currentTarget as CustomComboBox;
      trace(combo.value);
    }
  }
}

ComboBoxを継承し、ICellRendererを付加したカスタムクラスです。

以下がサンプルです。（要FlashPlayer）

DataGridにComboBoxを埋め込むことができました。

同じようにCheckBoxやButtonも同様に埋め込むことができそうですね。