DataGridの中のChekBox - yumicroの日記

DataGridはdataProviderにセットされたデータを
表示することができます。
ただ単に、文字をDataGridに表示させるだけならば
簡単なんですが、ユーザーによって表示内容が変え
られてしまうものを表示するときは一苦労しなくて
はなりません。

例えば、DataGridの中にCheckBoxを表示させる例が
あります。
CheckBoxはユーザーによって、チェックを入れられ
たり、はずされたりしますよね？
なので、しょっちゅう表示内容が変えられてしまいます。
表示内容が変わるということは、表示する元のデータで
ある、dataProviderの中のデータも変更させなくてはな
りません。初期表示でチェックがはずされていたら、
DataProviderの中のチェックボックスに関するデータは
falseになっているはずですが、ユーザーによってチェッ
クボックスにチェックを入れられてしまったら、
dataProviderのデータもtrueにしなくてはなりません。

具体的に説明すると、下のActionScriptのソースを見
て下さい。
houseという変数がありますが、これはメイン画面の
DataGridのDataProviderにセットされてるデータです。
さらにこの中にはchkという要素があり、これはDataGrid
の４番目のカラムで「選択」というカラムがdataFieldと
して指定しているデータです。
このchkはチェックボックスのselected(チェックの有無
を決めるプロパティ)をtrueにするかfalseにするかを指
定しています。デフォルトではfalseにしているので、
チェックボックスの初期表示はチェックがはずされた状態
になります。

しかし、ユーザーによってチェックが入れられてしまったら・・・。
このchkの内容を書き換えなくてはなりません。
なぜなら、DataGridはdataProviderの値を見ているわけです
から、表示内容が変更されたらdataProviderの内容も書き換
えてあげないと、表示内容も変更されないからです。
なんだかややこしいですね。
簡単に説明すると、下の様な流れになります。

１．ユーザーがチェックボックスにチェックを入れる
　　　　　　　　　↓
２．dataProviderのchkの値がfalseからtrueになる
　　　　　　　　　↓
３．chkがfalseからtrueに変更されたことをDataGridが
　　dataProviderによって参照する
　　　　　　　　　↓
４．チェックボックスにチェックが入る

次に、その作業をどこで行っているかです。

DataGridにコンポーネントを組み込む時は、itemRenderer
というものを使います。メイン画面のmxmlのDataGridの
DataGridColumnに書いてあるプロパティです。
ここに、自分で作ったカスタムコンポーネント(ChekBoxEx)
のパスを入れてあげます。
これでチェックボックスは表示できます。

さらにCheckBoxExについてですが、ここに書いてあるCheckBox
にchangeというイベントについて説明します。これは、チェッ
クボックスがユーザーによっていじられた時に発生するイベン
トです。
この中に書いてある式は、「ユーザーからいじられたら、データ
プロバイダで参照しているchkというプロパティに、このチェック
ボックスのselectedの状態を代入しろ」という意味です。
チェックボックにチェックが入ったら、このチェックボックスの
selectedはtrueになるので、このtrueがchkに代入されるんです。
ここでdataProviderの値は初めて変更されるわけです。
上のフローでいう、２の部分ですね。

さらに、CheckBoxExのrootになっているHBoxですが、ここに
dataChangeイベントがあります。
これはdataProviderの値が変更された時に発生するイベントです。
先ほどのchengeイベントによってdataProviderが参照しているchk
の値は変更されましたから、そのタイミングでdataChangeイベント
は発生します。
ここの式では、「もしdataProviderが参照しているchkの値がtrue
になっていたら、このチェックボックスのselectedにtrueを入れろ」
という意味です。
chkは今trueに変更になっているので、trueをチェックボックスの
selectedに代入しているわけです。ここで初めてチェックボックス
にチェックが入るわけです。
上のフローでいう、３と４の部分ですね。

チェックボックスひとつをDataGridに表示させたいだけなのに、
こんな大変なんて面倒臭いです。
この方法はチェックボックス意外にTextInputなどのデータが
ユーザーによって書き換えられた時も使えるので、参考にし
てみてください☆

ソース

☆メイン画面のmxml☆

☆メイン画面のActionScript(Acstion.as)☆

package test
{
	import mx.collections.ArrayCollection;
	import mx.collections.XMLListCollection;
	import mx.controls.Alert;
	
	public class Action
	{    
        [Bindable]
        public var house:XMLListCollection = new XMLListCollection(
			new XML(<root>
				 <house>
				 	<date>2009/10/24</date>
				 	<contents>光熱費</contents>
				 	<price>3000</price>
					<chk>false</chk>
				 </house>
				  <house>
				 	<date>2009/10/25</date>
				 	<contents>洋服</contents>
				 	<price>2000</price>
					<chk>false</chk>
				 </house>
				 <house>
				 	<date>2009/10/26</date>
				 	<contents>家賃</contents>
				 	<price>60000</price>
					<chk>false</chk>
				 </house>
			</root>).house);
			
	}
}

☆itemRendererが参照しているコンポーネント(ChechBoxEx.mxml)☆