続)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 メソッドを次のように全部空にして,

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

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

Ext.define('AM.view.Viewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.AM.viewport',
    id: 'AM.Viewport',
    layout: 'fit',
    items: [
        {
            xtype: 'userlist'
        }

    ]
});

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です