Flex Component
» グリッド/DataGrid (*)
Flex Component
» グリッド/DataGrid (*)
データグリッドは、Excelのような行と列を持った表形式のデータを表示するのに適したコントロールです。標準コンポーネントです。
DataGridは、Excelのような行と列を持つ表形式のデータを表示するのに適したコントロールです。統計データや、名簿、家計簿など、さまざまな用途に使えると思います。
以下のようなタグをソースに挿入します。
<mx:DataGrid x="10" y="10"/>
DataGrid のデータも dataProvider にデータを指定することで表示することができます。dataProviderは、List の時と同じでArrayCollection を指定します。
file:TestGrid.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!-- データの定義 -->
<mx:ArrayCollection id="person_ary">
<mx:Object name="佐藤一郎" age="30" email="ichiro@example.com"/>
<mx:Object name="鈴木次郎" age="28" email="jiro@example.com"/>
<mx:Object name="田中三郎" age="25" email="3rou@example.com"/>
<mx:Object name="竹内四郎" age="21" email="siro@example.com"/>
</mx:ArrayCollection>
<!-- DataGridの定義 -->
<mx:DataGrid x="30" y="30"
dataProvider="{person_ary}"/>
</mx:Application>実行結果を見ると、ArrayCollection型のデータに指定したフィールド名をヘッダに冠したグリッドが表示されます。
フィールド名を日本語にすれば、ヘッダも日本語になるのですが、それは根本的な解決になりません。そこで、データグリッドでは、表示したい列の項目を、詳しく指定することができるようになっています。
表示列のカスタマイズは以下のように記述します。
<mx:DataGrid x="30" y="30"
dataProvider="{person_ary}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="名前"/>
<mx:DataGridColumn dataField="age" headerText="年齢"/>
<mx:DataGridColumn dataField="email" headerText="メール"/>
</mx:columns>
</mx:DataGrid><mx:DataGrid>タグの中に、<mx:columns>を記述し、<mx:DataGridColumn>で、詳しい列の表示設定を行います。
<mx:DataGridColumn>タグでは、ヘッダに表示するテキストだけでなく、列の幅や、右寄せなどの設定を行うこともできます。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!-- データの定義 -->
<mx:ArrayCollection id="person_ary">
<mx:Object name="佐藤一郎" age="30" email="ichiro@example.com"/>
<mx:Object name="鈴木次郎" age="28" email="jiro@example.com"/>
<mx:Object name="田中三郎" age="25" email="3rou@example.com"/>
<mx:Object name="竹内四郎" age="21" email="siro@example.com"/>
</mx:ArrayCollection>
<!-- DataGridの定義 -->
<mx:DataGrid x="30" y="30"
dataProvider="{person_ary}">
<mx:columns>
<mx:DataGridColumn dataField="name"
headerText="名前"
width="80"/>
<mx:DataGridColumn dataField="age"
headerText="年齢"
textAlign="right"
width="60"/>
<mx:DataGridColumn dataField="email" headerText="メール"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>グリッドの行をクリック選択したときに、何か処理を行う場合は、DataGridの click イベントのイベントハンドラを設定します。
以下のプログラムは、グリッドの行をクリックすると、名前と電話番号をダイアログに表示する例です。
file GridClick.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!-- データの定義 -->
<mx:ArrayCollection id="person_ary">
<mx:Object name="佐藤一郎" tel="080-xxx-1111" />
<mx:Object name="鈴木次郎" tel="080-xxx-1112"/>
<mx:Object name="田中三郎" tel="080-xxx-1113"/>
</mx:ArrayCollection>
<!-- DataGridの定義 -->
<mx:DataGrid x="30" y="30"
id="a_grid"
dataProvider="{person_ary}"
click="onClick()">
<mx:columns>
<mx:DataGridColumn headerText="名前" dataField="name"/>
<mx:DataGridColumn headerText="電話" dataField="tel"/>
</mx:columns>
</mx:DataGrid>
<!-- スクリプト -->
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function onClick():void {
var sel:Object = a_grid.selectedItem; // ---(*1)
if (sel == null) return;
Alert.show(sel.name + "\n" + sel.tel);
}
]]>
</mx:Script>
</mx:Application>→グリッドをクリックするとクリックした行の情報を表示します。
選択している行を表すのが、selectedItem です。プログラム中の(*1)のように、選択している行のデータをObject型で取得することができます。
DataGridにアイコンを表示するには、グリッドの列の定義で、独自のアイテムレンダラーを表示するように指定します。
アイコンを表示するだけのアイテムレンダラーは次のように定義できるでしょう。
<!-- アイコンを表示するレンダラーを定義 -->
<mx:Component id="icon_renderer">
<mx:HBox horizontalAlign="center">
<mx:Image source="{data.icon}" height="50" width="50"/>
</mx:HBox>
</mx:Component>Imageのsource属性で「{data.icon}」を指定しているので、データを定義するときは、次のように icon プロパティを追加します。
<!-- データの定義 -->
<mx:ArrayCollection id="person_ary">
<mx:Object name="佐藤一郎" age="30" icon="kingyo.png"/>
</mx:ArrayCollection>そして、グリッド列の定義でアイテムレンダラーを指定します。
<mx:DataGridColumn itemRenderer="{icon_renderer}" .. />
このように記述することで、以下のようなアイコン表示が可能なグリッドを作成できます。
