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

DataGrid 行にコンボボックス表示(ActionScript)

サンプル概要

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

サンプルイメージ

サンプル画像


サンプルソース

単純に DataGridColumn の itemRenderer を ComboBox にしてやるだけだと、
表示はコンボボックスになりますが、値の取得や更新などがうまくできません。

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

レンダラー DataGridColumnItemRendererComboBox.as
package {
	import flash.events.Event;
	
	import mx.collections.ArrayCollection;
	import mx.controls.ComboBox;
	import mx.controls.dataGridClasses.DataGridListData;
	
	/**
	 * DataGridColumn の ItemRenderer
	 * ComboBox 用
	 */
	public class DataGridColumnItemRendererComboBox extends ComboBox {
		
		// ------------------------------------------------------------
		// 変数
		// ------------------------------------------------------------
		
		/** 値 */
		private var _value:uint;
		
		
		// ------------------------------------------------------------
		// public
		// ------------------------------------------------------------
		
		/**
		 * コンストラクタ
		 */
		public function DataGridColumnItemRendererComboBox() {
			super();
			
			// データプロバイダを作成
			dataProvider = [ {label:'XXXXX', data:1},
							 {label:'YYYYY', data:2},
							 {label:'ZZZZZ', data:3} ];
			
			addEventListener(Event.CHANGE, changeHandler, false, 0, true);
		}
		
		/**
		 * 値の Getter
		 */
		public function get workValue():uint {
			return _value;
		}
		
		/**
		 * 値の Setter
		 * 
		 * @param i_value	セット値
		 */
		public function set workValue(i_value:uint):void {
			_value = i_value;
			invalidateProperties();	
		}
		
		/**
		 * @param i_item	itemRenderer 値
		 */
		public override function set data(i_item:Object):void	{
			super.data = i_item;
			if (this.dataProvider != null) {
				selectedIndex = getLabelIndex( data[DataGridListData(listData).dataField] );
			}
		}
		
		
		// ------------------------------------------------------------
		// protected
		// ------------------------------------------------------------
		
		/**
		 * プロパティの更新
		 */
		protected override function commitProperties():void {
			selectedIndex = getLabelIndex( data[DataGridListData(listData).dataField] );
			super.commitProperties();
		}
		
		// ------------------------------------------------------------
		// private
		// ------------------------------------------------------------
		
		/**
		 * 引数値と合うインデックスを取得
		 * 
		 * @param i_value	dataProvider の値
		 * @return selectedIndex 値
		 */
		private function getLabelIndex(i_value:int):uint {
			var arrayCollection:ArrayCollection = dataProvider as ArrayCollection;
			for (var i:uint = 0; i < arrayCollection.length; i++) {
				if (arrayCollection.getItemAt(i).data == i_value) {
					return i;
				}
			}
			return 0;
		}
		
		/**
		 * CombokBox の change イベント
		 * 
		 * @param event	Event
		 */
		private function changeHandler(event:Event):void {
			var arrayCollection:ArrayCollection = dataProvider as ArrayCollection;
			if (listData) {
				workValue = arrayCollection.getItemAt(selectedIndex).data;
				data[DataGridListData(listData).dataField] = workValue;
			}
		}
	}
}


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

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

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

更新履歴

2008/03/28 本ページ新規追加


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