Flex の itemRenderer - 初級

Flexでリストの中にチェックボックスや画像を表示!?　（1/3） - ＠IT を見ながら。

とりあえずカンタンなところから。DataGrid の中に TextInput, ComboBox を出すのはこんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var d:ArrayCollection = new ArrayCollection([
                {hoge:"hoge0", foo:"foo0", piyo:"piyo0"},
                {hoge:"hoge1", foo:"foo1", piyo:"piyo1"},
                {hoge:"hoge2", foo:"foo2", piyo:"piyo2"}]);
        ]]>
    </mx:Script>
    <mx:DataGrid y="10" dataProvider="{d}">
        <mx:columns>
            <mx:DataGridColumn headerText="列 1" dataField="hoge" itemRenderer="mx.controls.ComboBox"/>
            <mx:DataGridColumn headerText="列 2" dataField="foo" itemRenderer="mx.controls.TextInput"/>
            <mx:DataGridColumn headerText="列 3" dataField="piyo"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

itemRenderer にクラスの完全修飾名を書いてやる。itemRenderer に指定可能なクラスの条件はまだよくわかっていない。とりあえず Flex の標準コントロールの幾らかは対応してるようだ。

次。DataGrid の行に DataGrid を表示してみる。実行イメージはこんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var d:ArrayCollection = new ArrayCollection([
                {hoge:"hoge0", foo:"foo0", bar:["hoge1","hoge1_1"]},
                {hoge:"hoge1", foo:"foo1", bar:["hoge2","hoge2_1"]},
                {hoge:"hoge2", foo:"foo2", bar:["hoge3","hoge3_1"]}]);
        ]]>
    </mx:Script>

    <mx:DataGrid y="10" dataProvider="{d}" x="10">
        <mx:columns>
            <mx:DataGridColumn headerText="列 1" dataField="hoge" itemRenderer="mx.controls.ComboBox"/>
            <mx:DataGridColumn headerText="列 2" dataField="foo" itemRenderer="mx.controls.TextInput"/>
            <mx:DataGridColumn headerText="列 3" dataField="bar" itemRenderer="MyDataGrid"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

列 3 の itemRenderer で指定している MyDataGrid はこんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
    dataProvider="{d}"
    showHeaders="false"
    creationComplete="cComp(event)"
    rowCount="3">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            private var d:ArrayCollection = new ArrayCollection();
            private function cComp(event:Event):void {
                d.addItem(data.bar[0]);
                d.addItem(data.bar[1]);
            }
        ]]>
    </mx:Script>

    <mx:columns>
        <mx:DataGridColumn headerText="列 1" dataField="col1"/>
    </mx:columns>
</mx:DataGrid>

各行のデータには data プロパティでアクセスできる。親？側からデータ渡したい場合はコレでいけるっぽい。

ただ、よーわからんのが MyDataGrid#creationComplete が 4 回呼ばれるのよね……。ヘッダー列も含めて 4 回ってことなのかな？　まぁどっちにしろ アイテムレンダラーとアイテムエディタのライフサイクルについて -- Flex 2.01 とか読んでちょっと勉強しないとダメっぽい。itemRenderer むつかしいっす。