« サンプルページが見辛かったようです | トップページ | Flex2のDataGridにXMLデータをバインドする »

2006年7月25日 (火)

Flex2 コントロール - DataGrid -

DataGridのサンプルと簡単な使用例です。
コントロール サンプルページ
example.mxml

dataProviderにはXMLListなどを指定できます。
columnsプロパティ内にDataGridColumnをカラムの数だけ配置し、DataGridColumnのdataFieldプロパティにバインドするデータの名前を指定するだけで基本的にはOKのようです。
ソートや列の入れ替えもできます。

また、editableプロパティにtrueを設定することで、データを直接編集できるようになります。
editableプロパティはDataGridColumnも持っており、カラムごとに個別に設定できます。
<mx:XMLList id="exampleData">
    <data>
        <col1>Row1 Col1</col1>
        <col2>Row1 Col2</col2>
        <col3>Row1 Col3</col3>
    </data>
    <data>
        <col1>Row2 Col1</col1>
        <col2>Row2 Col2</col2>
        <col3>Row2 Col3</col3>
    </data>
    <data>
        <col1>Row3 Col1</col1>
        <col2>Row3 Col2</col2>
        <col3>Row3 Col3</col3>
    </data>
    <data>
        <col1>Row4 Col1</col1>
        <col2>Row4 Col2</col2>
        <col3>Row4 Col3</col3>
    </data>
</mx:XMLList>

<mx:DataGrid id="grid" dataProvider="{exampleData}" editable="true">
    <mx:columns>
        <mx:DataGridColumn dataField="col1" headerText="Column1" editable="false" />
        <mx:DataGridColumn dataField="col2" headerText="Column2" />
        <mx:DataGridColumn dataField="col3" headerText="Column3" />
    </mx:columns>
</mx:DataGrid>

列にチェックボックスを表示したり、値を編集する際にComboBoxを使用したいという場合も多いと思いますが、そのような事も可能なようです。
それらについては、また後日書いてみたいと思います。

|

« サンプルページが見辛かったようです | トップページ | Flex2のDataGridにXMLデータをバインドする »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11092548

この記事へのトラックバック一覧です: Flex2 コントロール - DataGrid -:

« サンプルページが見辛かったようです | トップページ | Flex2のDataGridにXMLデータをバインドする »