日々精進

新しく学んだことを書き留めていきます

Architecting Your App in Ext JS 4, Part 3その3

この記事はArchitecting Your App in Ext JS 4, Part 3 | Learn | Senchaの抄訳・意訳です。


Step 5
app/controller/Song.js

...
onRecentSongsLoad: function(songs, request) {
    var store = this.getRecentSongsStore(),
        selModel = this.getRecentlyPlayedScroller().getSelectionModel();   

    selModel.select(store.last());
}
...

songデータがRecentSongsストアにロードされたらRecentlyPlayedScrollerビュー内で最新のsongを選択させる。
これはセレクションモデルを取得し、セレクトメソッドを実行することで行える。


Step 6

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

onSongSelect: function(selModel, selection) {
    this.getSongInfo().update(selection[0]);
}
...

recentlyplayedscrollerの選択しているアイテムを変更するとselectionchangeイベントが発生する。


Starting a new station
ここまで土台が出来たら機能追加は簡単。
新しいstationを作る機能追加は以下。
app/controller/Station.js

...
refs: [{
    ref: 'stationsList',
    selector: 'stationslist'
}],

init: function() {
    // Listen for the select event on the NewStation combobox
    this.control({
        ...
        'newstation': {
            select: this.onNewStationSelect
        }
    });
},

onNewStationSelect: function(field, selection) {
    var selected = selection[0],
        store = this.getStationsStore(),
        list = this.getStationsList();

    if (selected && !store.getById(selected.get('id'))) {
        // If the newly selected station does not exist in our station store we add it
        store.add(selected);
    }

    // We select the station in the Station list
    list.getSelectionModel().select(selected);
}
...



Summary
コントローラの応用的な設定やViewとロジックを分離する方法を紹介した。
それによって、アーキテクチャは理解しやすく、メンテナンスしやすくなった。


次のPartではスタイルとカスタムコンポーネントを重点的に解説する。
ソースコードは以下からダウンロード出来る。是非コメントを送って欲しい。
http://cdn.sencha.io/img/architecting-your-app-in-ext-js-code.zip