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