この記事は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();
訳注終わり)