日々精進

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

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

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


複数のmodel,view,controllerを持つ複雑なアプリの構築方法を解説していく。
題材はPart2の続きでPandoraのリニューアル。


Getting References
Part2ではExt.applicationの中でmodels,storesを指定することでmodelクラス、storeクラスをロードした。
app/Application.js

Ext.application({
    ...
    models: ['Station', 'Song'],    
    stores: ['Stations', 'RecentSongs', 'SearchResults']
    ...
});

ロードされたクラスは自動的にインスタンス化されるし、インスタンスにアクセスするためのgetterも作られる。
models,stores,views,controllersプロパティにクラス名を渡すとロード、インスタンス化、getter作成が行われる。
Ext.applicationだけでなく、controllerにも同じように書ける。動作は全く同じ。
app/controller/Station.js

...
stores: ['Stations'],
...

こう書くと、storeのgetterであるgetStationsStoreがStationコントローラに自動的に定義される。
なお、viewとmodelのgetterはクラスへの参照を返すので注意!
storeとcontrollerのgetterはインスタンスへの参照を返す。


Referencing view instances
このアプリ内ではViewport内にある実際のViewのインスタンスへの参照が必要。
Extjs3ではExt.getCmpを使ってViewのインスタンスへの参照を取得するのが一般的だった。
これは今でも使えるが、推奨されない。
理由はExt.getCmpを使ってインスタンスへの参照を取得するためにはコンポーネントにIDを振っておかないといけないため。
Extjs4ではComponentQueryを使ってインスタンスへの参照を取得するべき。
app/controller/Station.js

...
refs: [{
    // A component query
    selector: 'viewport > #west-region > stationslist',
    ref: 'stationsList'
}]
...

refsプロパティでViewへの参照を取得出来る。
refsに渡すオブジェクトの配列の仕様は以下。
・selector ComponentQueryを文字列で渡す
・ref refに渡された文字列からgetterメソッドが作られる。
stationsListを渡すとgetStationsListメソッドがコントローラに作られる。


refsを使うとselectorに対応するオブジェクトが存在するかどうかにかかわらず、getterメソッドが作られる。
対応するオブジェクトがない場合、getterメソッドの返り値がnullになる。
そのため、Viewを動的に作っている場合getterの返り値がnullかどうかのチェックをcontroller側でする必要がある。
さらに、複数のオブジェクトがComponentQueryにマッチした場合、最初の一つへの参照だけが返される。
ComponentQueryはオブジェクト一つだけに一致するように書くこと。


(訳注:複数のオブジェクトが一致する場合、以下のような挙動を示す。

//複数のViewがComponentQueryに一致するが最初の一つへの参照だけが返される
var stationsList = getStationsList();
//メモリ解放(これでいいかはちょっと自信なし)
stationsList.destroy();
//getStationsListはnullを返す。2番目に一致するオブジェクトは返されない。
stationsList = getStationsList();

訳注終わり)