ダブルクリックで DataGrid を編集状態にする

Flash Flex

Flex 3.0 の DataGrid では、editable プロパティに true を設定するとシングルクリックで指定のセルを編集状態にする事ができる。

しかし、シングルクリックの代わりにダブルクリックで編集状態にする仕組みが用意されておらず、マウスアップのイベント処理（DataGrid クラスの mouseUpHandler メソッド）で編集を開始するイベントを呼び出している関係上（ITEM_EDIT_BEGINNING タイプのイベントを dispatchEvent）、まともにダブルクリック対応を行うには以下のサイトのように DataGrid のサブクラスを作成する事になりそうです。


今回、サブクラスを作成するのはあまり気が進まなかったので、別の方法で実現してみました。

ソースコードは以下の通り。
実装内容は至って単純で itemEditBeginning イベント処理の中でダブルクリックの判定を自前で行ってシングルクリックならイベントをキャンセルするだけです。
OS 設定のダブルクリックの時間間隔は反映できませんが、一応動作します。

DoubleClickDataGridSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
    <![CDATA[
        import flash.utils.getTimer;
        import mx.events.DataGridEvent;

        //ダブルクリックと判断する有効時間（ミリ秒）
        private const DOUBLE_CLICK_TIME: int = 1000;

        private var oldEvent: DataGridEvent;
        private var oldTime: int;

        private function onItemEditBeginning(event: DataGridEvent): void {

            if (!validateDoubleClick(event)) {
                //シングルクリックの場合はイベントをキャンセル
                event.preventDefault();
            }
        }

        //ダブルクリックか否かを判定する
        private function validateDoubleClick(event: DataGridEvent): Boolean {
            var nowTime: int = getTimer();

            var result: Boolean = (
                oldEvent != null && 
                event.columnIndex == oldEvent.columnIndex &&
                event.rowIndex == oldEvent.rowIndex &&
                (nowTime - oldTime) <= DOUBLE_CLICK_TIME
            );

            oldEvent = (result)? null: event;
            oldTime = nowTime;

            return result;
        }
    ]]>
    </mx:Script>
    <mx:XML id="dataList">
        <list>
            <data title="テストデータ" point="10" date="2008/01/01" />
            <data title="test data" point="100" date="2008/11/01" />
            <data title="abc123" point="100" date="2008/11/01" />
        </list>
    </mx:XML>
    <mx:DataGrid id="grid" editable="true" 
        itemEditBeginning="onItemEditBeginning(event)">
        <mx:columns>
            <mx:DataGridColumn dataField="@title" headerText="Title" />
            <mx:DataGridColumn dataField="@point" headerText="Point" />
            <mx:DataGridColumn dataField="@date" headerText="Date" editable="false" />
        </mx:columns>
        <mx:dataProvider>
            {dataList.data}
        </mx:dataProvider>
    </mx:DataGrid>
</mx:Application>