MVC Architectureその１

公式：http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture
クライアントサイドでもMVCパターンを使って保守性の高いコードを書こう！
Extjsと一般的なMVCの違いはStoreがあること。Storeは
エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践)で出てくるRepositoryだと思われる。


File Structure
推奨フォルダ構成は以下。



Creating the application in app.js
まずはApplicationを定義しよう。

Ext.application({
    name: 'AM', //アプリの名前。唯一のグローバル変数であり、トップレベルの名前空間になる

    appFolder: 'app',

    launch: function() {//launchはApplicationの設定が終わったら呼び出される。このコードが何をしているかはわからない。。
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                }
            ]
        });
    }
});

Defining a Controller
コントローラがやってることはViewのイベントを聞いて、モデルを呼び出すこと。
コントローラのサンプルは以下。

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    //initはApplicationのlaunchの直後に呼ばれる
    //この中でViewのイベントとイベントハンドラの紐付けを行うこと。
    init: function() {
        this.control({
            'viewport > panel': {//CSS風の書式でイベントを発生させるエレメントを指定
                render: this.onPanelRendered　//イベントとイベントハンドラを紐付け
            }
        });
    },

    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

this.control内で使っているCSS風のセレクタは厳密にはCSSとは違うっぽい。
ComponentQueryというらしい。えー。CSSの上位互換にしてよ。。
http://docs.sencha.com/ext-js/4-0/#/api/Ext.ComponentQuery

コントローラはApplicationに登録しておかないといけない。
コントローラはExt.applicationが呼び出されるとすぐロードされる。

Ext.application({
    ...

    controllers: [
        'Users'
    ],

    ...
});