続)Ext JS4 MVC でのViewport.jsって?

Ext JS4 MVC でのViewport.jsって? のエントリーでうやむやのまま終わってたViewport.js の件,調べてみました。なおこのエントリーの中には,PerfectDay で @kotsutsumi さんに教えられたことがもとになっています。(多謝)

viewport.js はどのように使うのか。なんでほとんど空っぽの viewport.js を置いているのか。 viewport.js があるのに,appのlaunchメソッドの中でわざわざviewportを定義しているではないか。 どっちか,いらないのじゃないか?という謎解きに挑戦w

ためしに完成品のサンプルから viewport.js を削除して,autoCreateViewport を false にしてみる。

やろうと思ったら,単に viewport.js を削除しただけでも,エラーが出ませんでした。4.0.1 になったら 出なくなったみたい。いろいろ調べたら,4.0.1は,autoCreateViewport の初期値がすでに false で あることが判明しました。

ExtJS4の仕様としては,autoCreateViewport が false の時には,Viewport.js があっても 読みに行きません。 autoCreateViewport が true の時だけ,Viewport.js を探して読みに行くのです。

だからViewportの定義をViewport.jsでやりたい場合は,autoCreateViewportを明示的に true にしてやります。

つぎに,launch での viewport の作成をしないで,viewport.js で作成するようにしてみる。

app.js の launch メソッドを次のように全部空にして,

[js] launch: function() { /* Ext.create(‘Ext.container.Viewport’, { layout: ‘fit’, items: [ { xtype: ‘userlist’ } ] }); */ } [/js]

Viewport.js を次のようにしてみます。

[js] Ext.define(‘AM.view.Viewport’, { extend: ‘Ext.container.Viewport’, alias: ‘widget.AM.viewport’, id: ‘AM.Viewport’, layout: ‘fit’, items: [ { xtype: ‘userlist’ } ] }); [/js]

それでも前と全く同じように動作します。

ということで,ひとまずの結論です。

  1. MVCのシンプルなサンプルでは,実は,Viewport.js は使ってない。 だから,最初からそれをプロジェクトから削除して,autoCreateViewport = false の状態で 使って良い。
  2. もしくは,autoCreateViewport = true にして,Viewport.js をちゃんと働かせるのなら, app.js の launch メソッドなんかに Viewport の定義なんか書かないで, Viewport.js に書く。

ということになります。2の方がよさげに思いませんか?

PerfectDayでは,この他にもアプリケーション開発の実践的なノウハウを教えてもらえます。是非ご参加を!

僕も教えてもらったことを,ぼちぼちとここでリークさせてもらいます。w