この記事は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