ExtJS Window でダイアログのデフォルトボタンみたいにEnterキーを拾いたい

Windowsのダイアログとかでよく使うデフォルトボタン。ダイアログが表示されているときにEnterキーが押されると，そのボタンが押されたことになる，というやつ。同様にキャンセルボタン，ESCキーが押されるとそのボタンが押されたことになる。

これをExtJSでやろうと思います。

この機能を実現するには，Ext.KeyNav を使います。

Ext.KeyNav は，エレメントに設定します。コンストラクタにエレメントを渡して new して使います。ですので，Window から getEl() して，Ext.KeyNavのインスタンスを作ることにします。エレメントができてないといけないので，Window の afterrender イベントで，それをやってみます。

WinHoge = Ext.extend(WinChgPassUi, {
    initComponent: function() {
        WinHoge.superclass.initComponent.call(this);
        this.on('afterrender', this.onAfterrender, this);
        this.btnOK.on('click', this.onBtnOKClick, this);
        this.btnCancel.on('click', this.onBtnCancelClick, this);
    },

    /**
     * Window のAfterrenderイベントハンドラ
     * @param Ext.component cmp
     */
    onAfterrender: function (cmp) {
        // Enterキーと ESCキーの動作を定義
        var el = cmp.getEl();
        var nav = new Ext.KeyNav(el, {
            enter: this.onBtnOKClick,
            esc: this.onBtnCancelClick,
            scope: this
        });
    },
    onBtnOKClick: function () {
        // OKの時の処理
            :
            :
        this.close();
    },
    onBtnCancelClick: function () {
        this.close();
    }

onAfterRender イベントハンドラの中で，KeyNavを作っています。コンストラクタの一つ目の引数はエレメントなので，引数として渡されたコンポーネントからgetEl()でエレメント取得して渡しています。二つ目の引数はイベントハンドラ定義で，Enter キーと ESC キーのイベントハンドラを，それぞれのボタンに割り当てています。それだけです。簡単でしたね。