Architecting Your App in Ext JS 4, Part 2その４

この記事はhttp://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt2の抄訳・意訳です。


Setting up listeners
Controllerのinitメソッドでイベントハンドラを設定していく。
app/controller/Station.js

init: function() {
    this.control({
        'stationslist': {
            selectionchange: this.onStationSelect
        },
        'newstation': {
            select: this.onNewStationSelect
        }
    });
}

controlメソッドはKeyをコンポーネントクエリとして取得したオブジェクトに対してKeyをイベント名、Valueをイベントハンドラとして紐付ける。
ここではxtypeを指定しているがコンポーネントクエリを使うと色んなオブジェクトが取れる。詳細はAPIドキュメント参照。
使用できるイベントの一覧についてもAPIドキュメント参照。


イベントハンドラ内のthisはコントローラを指す。
app/controller/Song.js

init: function() {
    this.control({
        'recentlyplayedscroller': {
            selectionchange: this.onSongSelect
        }
    });

    this.application.on({
        stationstart: this.onStationStart,
        scope: this
    });
}

controlメソッドの中でthis.applicationにもイベントハンドラを設定できる。
applicationイベントは全Controllerで同じイベントを発火させられる。
コントローラが多い場合に有効。
app/controller/Station.js

onStationSelect: function(selModel, selection) {
    this.application.fireEvent('stationstart', selection[0]);
}

stationstartイベントをselection[0]を引数として呼び出している。