FlexのDataGridでカスタムアイテムレンダラーを使う

編集後の値取得方法が分からなくて苦労したのでメモ。

今回は下記で紹介されているスターレーティング用コンポーネントをDataGridで使ってみた。
http://flexibleexperiments.wordpress.com/2007/04/28/flex-201-rating-component/

ここの「Sample and Source」の隣のリンクからサンプルページに移動し、
右クリックで「View Source」でソース表示画面に移動する。
その画面の左下部の「downlaod source」の部分をクリックすればソースがダウンロードできる。

ダウンロードしたら解凍して、生成されたcomフォルダを
コンパイル時に読み込めるところに配置する。

使用する際は、下記のようにDataGridを作成する。
ここでitemEditEndイベントを設定しておくと、レートを変更した時に変更結果を取得できる。

<mx:DataGrid id="rateGrid" percentWidth="100" percentHeight="100" editable="true" itemEditEnd="handleListChange(event);">
<mx:ArrayCollection>
<mx:Object title="タイトル1" rate="2"/>
<mx:Object title="タイトル2" rate="1" />
</mx:ArrayCollection>
<mx:columns>
<mx:DataGridColumn headerText="タイトル" dataField="title" editable="false" />
<mx:DataGridColumn headerText="レート" width="100" dataField="rate" editable="true" itemRenderer="com.Rating.Ratings" rendererIsEditor="true" editorDataField="value" />
</mx:columns>
</mx:DataGrid>

editorDataFieldの値はvalueで固定。これはRatingsクラスで指定されている模様。
dataFieldの値はDataGridに表示するコレクションのフィールド名を指定する。

編集イベントをキャッチする処理は下記のような感じで定義する。
イベントが実行されるのは、レートを変更して別の行にターゲット行が移動した時。

private function handleListChange(event:DataGridEvent):void {
var row:Object = event.currentTarget.selectedItem;
testtxt.text = "title:" + row.title + " rate:" + row.rate;
//下記のようにアイテムレンダラー（アイテムエディタ？）オブジェクトを直接取得することも可能
//var rating:Ratings = Ratings(event.currentTarget.itemEditorInstance)
//testtxt.text = "rate:" + rating.value;
}