EditorGridPanel 二題

本館のブログで，EditorGridPanlでEnterキーの動作を変更する | Sunvisor Lab. という記事を書きました。EditorGridPanel での Enterキーの挙動を変更するというエントリーです。

その件に関する追加情報と，EditorGridPanelで編集モードに入ったときに，項目を選択状態にする件についてです。

続）EditorGridPanel の Enter キーの動作を変更する

そのエントリーの中では，インスタンス化された EditorGridPanel のメソッドを再定義することで思ったような挙動をさせることをしていました。この方法では，あるEditrotGridPanelに対してのみ効果を発揮します。他のところで使用されているEditrotGridPanelは以前の挙動のままです。では，アプリケーション全体でEditrotGridPanelの挙動を変えたい場合はどうすればよいでしょうか。

インスタンス化される前に，メソッドを入れ替えてやります。クラス自体の定義を変えてやれば，その後インスタンス化したもの全体に影響しますからね。この方法でメソッドを入れ替えるには，Ext.override メソッドを使います。

[js] Ext.override(Ext.grid.CellSelectionModel, { onEditorKey: function(field, e){ var k = e.getKey(), g = this.grid, ed = g.activeEditor, newCell, me = this; if( k == e.TAB ){ me.handleKeyDown(e); }else if( k == e.UP || k == e.DOWN || k == e.LEFT || k == e.RIGHT ){ if( ed ) ed.completeEdit(); me.handleKeyDown(e); }else if( k == e.ENTER){ var s = this.selection; var r = s.cell[0], c = s.cell[1]; newCell = g.walkCells(r + 1, c, 1, this.isSelectable, this); if( newCell ){ me.select(newCell[0], newCell[1]); if( ed ) ed.completeEdit(); me.handleKeyDown(e); } } } }); [/js]

なんだか最初の方法よりもスマートです。こっちで行くことにしましょう。

でも，全部のEditrotGridPanelでこの動作は必要ないけど，いくつかのところでいるんだよねってときはどうしましょう。インスタンスごとに新しい挙動をオン・オフできるようにしたいということです。

そんな時は，プラグインを使いうんだそうです。プラグインを使えば，あるコンポーネントに機能を追加できる上に，その動きを制御することもできるんだって。さらにスマートなイメージがします。もうちょっと勉強して使えるようになろう。そう言っている内にExt JS 4の時代になるなきっと。

編集モードに入ったときに全部選択しておいて

上記のやり方でEnterキーの動作を変更したグリッドを使ってもらっていたら，

「Enterで値の訂正に入ったときに，選択状態が何も選択されていない状態だから，入力する前に古い値を一生懸命削除しなきゃならんのがめんどうなんだよね。編集モードに入ったら，全て選択されている状態にはならんもんなん？」

という要望をうけました。前の記事でも目的として書いていたように

<数値><Enter><数値><Enter><数値><Enter><数値><Enter><数値><Enter>

という入力ができるのが目的ですから，この要望は当然です。

これの解決は意外と簡単でした。ColumnModelのコンフィグで，次のように selectOnFocus コンフィグを true にするだけです。

[js] { xtype: ‘gridcolumn’, dataIndex: ‘money1’, header: ‘金額1’, sortable: false, width: 100, editor: { xtype: ‘numberfield’, selectOnFocus: true } }, [/js]