Ext JS のビューコンポーネントやコントローラーが発生させるイベントを捕捉する方法をメモっとく。

Ext JS で開発していると、このコンポーネントを操作したタイミングで処理したいんだよなと思うことがある。API ドキュメントで該当コンポーネントのイベント一覧を眺めながら推測するという手もあるのだけど、実際に操作したときに発生しているイベントを捕捉した方が早かったりする。

今回は Ext JS Application Development Blueprints の第2章に登場するサンプルコードでイベントを捕捉してみる。実際に手を動かして試してみてほしい。

ビューコンポーネントが発生させるイベントを捕捉する

ビューコンポーネントが発生するイベントを捕捉してみよう。ブラウザーの JavaScript コンソールから Ext.first メソッドでビューを取得し、内包しているテキストフィールドのイベントを Ext.mixin.Observable.capture メソッドで捕捉する。

var view = Ext.first('app-search')
Ext.mixin.Observable.capture(view.down('textfield'), function() { console.dir(arguments) })

実際にテキストフィールドを操作するとイベントが発生して、JavaScript コンソールに出力される。実際の動作は上記のスクリーンショットを参照してほしい。

発生するイベントが見付かればいいのだが、見付からないときは一旦対象のビューコンポーネントの捕捉を解除しよう。解除するときは Ext.mixin.Observable.releaseCapture メソッドを利用する。

Ext.mixin.Observable.releaseCapture(view.down('textfield'))

ボタンのイベントを捕捉したいときも下記のように Ext.mixin.Observable.capture メソッドを利用する。

Ext.mixin.Observable.capture(view.down('button'), function() { console.dir(arguments) })

イベントの捕捉を解除する方法も同様だ。

Ext.mixin.Observable.releaseCapture(view.down('button'))

コントローラーが発生させるイベントを捕捉する

さらにコントローラーが発生するイベントを捕捉してみよう。Ext.mixin.Observable.releaseCapture メソッドに、ビューコンポーネントの代わりにコントローラーを渡すだけだ。

var view = Ext.first('app-search')
var controller = view.getController()
Ext.mixin.Observable.capture(controller, function() { console.dir(arguments) })

イベントの捕捉を解除する方法も同様だ。

Ext.mixin.Observable.releaseCapture(controller)

今回は Ext JS のコンポーネントやコントローラーが発生させるイベントを捕捉する方法について説明した。Ext JS 開発のテクニックとしてぜひ覚えておいてほしい。