タイトル
 メニューにないコーナーはTopからいけます
TOP覚え書きFlex → This Page
Flexサンプル

DataGrid 行にチェックボックス表示(ActionScript)

サンプル概要

DataGrid の行内にCheckox(チェックボックス)を表示します。
レンダラーを ActionScript で実現しています

サンプルイメージ

サンプル画像


サンプルソース

単純に DataGridColumn の itemRenderer を CheckBox にしてやるだけだと、
チェック自体は可能になりますが、値の取得などがうまくできません。
(チェックを切り替えても見た目だけが変わって、内部データは変わっていないっぽい)

なので、自分でレンダラーを作成することになります。
今回のサンプルではレンダラーを ActionScript(*.as ファイル)で作成しています。

レンダラー DataGridColumnItemRendererCheckBox.as
package {
	import flash.events.Event;
	
	import mx.controls.CheckBox;
	import mx.controls.dataGridClasses.DataGridListData;
	import mx.core.mx_internal;
	use namespace mx_internal;
	
	/**
	 * DataGridColumn の ItemRenderer
	 * CheckBox 用
	 */
	public class DataGridColumnItemRendererCheckBox extends CheckBox {
		
		// ------------------------------------------------------------
		// 変数
		// ------------------------------------------------------------
		
		/** 値 */
		private var _value:*;
		
		
		// ------------------------------------------------------------
		// public
		// ------------------------------------------------------------
		
		/**
		 * コンストラクタ
		 */
		public function DataGridColumnItemRendererCheckBox() {
			super();
			addEventListener(Event.CHANGE, changeHandler, false, 0, true);
		}
		
		/**
		 * 値の Getter
		 */
		public function get value():Object {
			if (_value == undefined) {
				return _value;
			} else {
				return selected ? true : false;
			}
		}
		
		/**
		 * 値の Setter
		 * 
		 * @param i_value	セット値
		 */
		public function set value(i_value:*):void {
			_value = i_value;
			invalidateProperties();	
		}
		
		/**
		 * @param i_item	itemRenderer 値
		 */
		public override function set data(i_item:Object):void	{
			super.data = i_item;
			if (i_item != null) {
				value = i_item[DataGridListData(listData).dataField];
			}
		}
		
		
		// ------------------------------------------------------------
		// protected
		// ------------------------------------------------------------
		
		/**
		 * プロパティの更新
		 */
		protected override function commitProperties():void {
			if (_value != undefined) {
				selected = (_value == true);
			}
			super.commitProperties();
		}
		
		/**
		 * 再描画
		 * 
		 * @param unscaledWidth		親コンテナにより決定されるコンポーネントの幅
		 * @param unscaledHeight	親コンテナにより決定されるコンポーネントの高さ
		 */
		protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			if (currentIcon) {
				var style:String = getStyle("textAlign");
				if ((!label) && (style=="center")) {
					// 中央表示
					currentIcon.x = (unscaledWidth - currentIcon.measuredWidth) / 2;
				}
				currentIcon.visible = (_value != undefined);
			}
		}
		
		
		// ------------------------------------------------------------
		// private
		// ------------------------------------------------------------
		
		/**
		 * CheckBox の change イベント
		 * 
		 * @param event	Event
		 */
		private function changeHandler(event:Event):void {
			if (listData) {
				value = selected;
				data[DataGridListData(listData).dataField] = value;
			}
		}
	}
}


そして作成したレンダラーを DataGridColumn の itemRenderer にセットします。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="420" height="207">
	<mx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			import mx.controls.Alert;
			
			/** 表示用XML */
			[Bindable]
				private var xmldata:XML =
					<root>
						<List text="AAAAAAAAAA" check="true" />
						<List text="BBBBBBBBBB" check="true" />
						<List text="CCCCCCCCCC" check="false" />
						<List text="DDDDDDDDDD" check="false" />
					</root>;
			
			[Bindable]
				public var list:XMLListCollection = new XMLListCollection(xmldata.List);
			
			/**
			 * 選択行のチェック状態取得
			 */
			private function getSelectRowCheck():void {
				var item:Object = dataGrid.selectedItem;
				if (item == null) {
					Alert.show("行が未選択です!");
					return;
				}
				
				// 本サンプルの item は XML になるので、check は @check でアクセス
				Alert.show("選択行のチェックは " + item.@check + " です。");
			}
		]]>
	</mx:Script>
	
	<!-- データグリッド -->
	<mx:DataGrid id="dataGrid" x="10" y="10" dataProvider="{list}">
		<mx:columns>
			<mx:DataGridColumn headerText="文字" dataField="@text"/>
			<mx:DataGridColumn headerText="チェック" dataField="@check"
					textAlign="center"
					itemRenderer="DataGridColumnItemRendererCheckBox"
					editorDataField="selected"
					rendererIsEditor="true"
					editable="true"/>
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Button x="10" y="169" label="選択行のチェック状態取得" click="getSelectRowCheck();"/>
	
</mx:Application>

サンプルソースのダウンロード

サンプルのダウンロード(ZIP圧縮)(Flex builder 2 用のプロジェクトファイルも同梱)

更新履歴

2008/03/28 「DataGrid 行にチェックボックス表示」を「DataGrid 行にチェックボックス表示(ActionScript)」に変更
2008/03/27 本ページ新規追加


TOP覚え書きFlex → This Page
Valid CSS!