Home > Flash | WEB > Flex AdvancedDataGrid 矢印キーでセル移動して編集

Flex AdvancedDataGrid 矢印キーでセル移動して編集

セル選択後と矢印キーで移動

NumericStepeprで編集して移動
(デフォルトでは矢印キーで数字変えちゃうのでそっちは殺してます)

DataGrid内のセルを矢印キーで選択して編集、というのをやりたくて、
調べて下記リンクのサンプルを見つけたんだけど、Flex 3ではこのままでは使えませんでした。

もうちょっと調べてみたところ、
DataGridColumn, AdvancedDataGridColumnのitemRenderer, itemEditorプロパティに、
自作のコンポーネントを割り当てればできそう。
→ http://livedocs.adobe.com/flex/3_jp/html/help.html?content=cellrenderer_4.html
→ http://www.necst.co.jp/product/ibiz/column/flex/chap17.html

というわけで、itemEditorにTextInputを継承した、TextInputRendererを割り当てて、
カーソルキーイベントを拾うようにして、移動可能とさせます。

GridTest.mxml

XML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="502" height="220">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dp_flat:ArrayCollection = new ArrayCollection([
{col_a:"test_1_1", col_b:"test_2_1", col_c:"test_3_1"},
{col_a:"test_1_2", col_b:"test_2_2", col_c:"test_3_2"},
{col_a:"test_1_3", col_b:"test_2_3", col_c:"test_3_3"},
{col_a:"test_1_4", col_b:"test_2_4", col_c:"test_3_4"},
{col_a:"test_1_5", col_b:"test_2_5", col_c:"test_3_5"}
]);
]]>
</mx:Script>
<mx anel x="10" y="10" width="480" height="204" layout="absolute" title="AdvancedDataGrid">
<mx:AdvancedDataGrid x="5" y="5" id="test_adg" designViewDataType="flat" width="449" height="152" dataProvider="{dp_flat}" editable="true">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="列 1" dataField="col_a" itemEditor="renderer.TextRenderer"/>
<mx:AdvancedDataGridColumn headerText="列 2" dataField="col_b" itemEditor="renderer.TextRenderer"/>
<mx:AdvancedDataGridColumn headerText="列 3" dataField="col_c" itemEditor="renderer.TextRenderer"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx anel>
</mx:Application>

TextRenderer.mxml

XML:

<?xml version="1.0" encoding="utf-8"?>
<mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" keyDown="onKeydownHandler(event)">
<mx:Script>
<![CDATA[
import mx.controls.AdvancedDataGrid;
import mx.controls.dataGridClasses.DataGridListData;
private function onKeydownHandler(event:KeyboardEvent):void{
// -> http://livedocs.adobe.com/flex/3_jp/html/help.html?content=cellrenderer_4.html
var list_data:DataGridListData = DataGridListData(listData);
var list_owner:AdvancedDataGrid = AdvancedDataGrid(list_data.owner);
var row_index:Number = list_data.rowIndex;
var column_index:Number = list_data.columnIndex;
var changed:Boolean = false;
if(event.keyCode == Keyboard.LEFT){
if(column_index> 0 ) {
changed = true;
column_index = column_index - 1;
}
}else if(event.keyCode == Keyboard.DOWN){
if(row_index <list_owner.dataProvider.length - 1 ) {
changed = true;
row_index = row_index + 1;
}
}else if(event.keyCode == Keyboard.RIGHT){
if(column_index <list_owner.columnCount - 1 ) {
changed = true;
column_index = column_index + 1;
}
}else if(event.keyCode == Keyboard.UP){
if(row_index> 0 ) {
changed = true;
row_index = row_index - 1;
}
}
if(changed)list_owner.editedItemPosition = {rowIndex:row_index, columnIndex:column_index};
}
]]>
</mx:Script>
</mx:TextInput>

Comments:0

Trackback URL for this entry: http://parpue.net/web/492/trackback
Listed below are links to weblogs that reference: Flex AdvancedDataGrid 矢印キーでセル移動して編集 from parpue.net

Home > Flash | WEB > Flex AdvancedDataGrid 矢印キーでセル移動して編集

最近の記事

カテゴリ