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