今回は、"世界で最もミニマムなExt-MVC導入"が目標です。

// 自動ファイル読込機能を有効化する。
Ext.Loader.setConfig({ enabled: true });

// アプリケーション'App'の定義
Ext.application({

    // Viewport自動生成機能を無効化する。
    autoCreateViewport: false,

    // アプリケーション名を'App'にセット。
    name: 'App',

    // アプリケーションフォルダパスを指定する。
    appFolder: './app',

    // このアプリケーションで使用するコントローラ名を指定する。
    controllers: [ 'Main' ],

    // アプリケーション起動イベントハンドラ
    launch: function() {

        // Viewを生成・表示する。
        Ext.create('App.view.main.Window',{}).show();
    }
});

// コントローラ'Main'の定義
Ext.define('App.controller.Main', {

    // コントローラは'Ext.app.Controller'を継承させる。
    extend: 'Ext.app.Controller',

    // このコントローラで使用するViewを指定する。
    views : ['main.Window'],

    // コントローラ起動イベントハンドラ
    init  : function() {

        // イベント関連付けを行う。
        this.control({

            // XType='mainwindow'のオブジェクト配下、action='ok'のボタンを
            // イベントハンドル対象とする。
            //   ※オブジェクト指定方法の詳細は、'Ext.ComponentQuery'をご確認ください。
            //   http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.ComponentQuery
            'mainwindow button[action=ok]': {
                // クリックイベントをハンドルする。
                click: function(btn){

                    // ボタンが所属するViewから、ボタンの上位方向に対して、
                    // XType='window'のオブジェクトを検索・取得する。
                    var win   = btn.up('window'),

                        // window配下のオブジェクトの中から、XType='form'の
                        // オブジェクトを検索・取得する。
                        form  = win.down('form'),

                        // フォーム配下にある項目の値を一括取得する。
                        value = form.getValues();

                    alert('Values JSON: '+ Ext.JSON.encode(value));
                }
            }
        });
    }
});

// ビュー'main.Window'の定義
Ext.define('App.view.main.Window', {
    extend  : 'Ext.window.Window',
    alias   : 'widget.mainwindow',
    title   : 'ウインドウ',
    items   : [
        {
            xtype: 'form',
            items: [
                {
                    xtype     : 'textfield',
                    name      : 'textbox',
                    fieldLabel: 'テキストボックス',
                    margin    : '5 5 5 5'
                }
            ]
        }
    ],
    buttons : [
        {
            text  : 'OK',
            action: 'ok'
        }
    ]
});

htdocs
  +- app
  |    +- controller
  |    |    +- Main.js
  |    +- view
  |         +- main
  |              +- Window.js
  +- ext
  |    +- locale
  |    |    +- ext-lang-ja.js
  |    +- resources
  |    |    +- (以下割愛)
  |    +- ext-all.js
  +- sample.html
  +- app.js

ExtJSの持ち味は、「統一感」です。

１）ExtJSをダウンロード・解凍する。

２）Webサーバから見える場所に配置する。

３）ExtJSを組み込んだコードを書く。

４）ブラウザで動作確認

Ext.define('クラス名'', {
    プロパティ名: プロパティ初期値,
    メソッド名: function(引数){
        処理;
    }
});

Ext.createを使う

var obj = Ext.create('クラス名', {});

Javascriptネイティブの、new演算子を使う

var obj = new クラス名();

明細データ入力用テンプレやら、複合カスタムコントロールやらを作ったとき、中身のフィールドが全部取れてしまう。困った。

ソースを読むと、Ext.ComponentQueryで取ってきている。

getFields: function() {
    var fields = this._fields;
    if (!fields) {
        fields = this._fields = new Ext.util.MixedCollection();
        fields.addAll(this.owner.query('[isFormField]'));
    }
    return fields;
},

このExt.ComponentQuery、「XXを除外する」みたいな記述方法が分からない。うむむ。

しゃあなし、別途取得した除外フィールドを対象から外すようにする。

fields = new Ext.util.MixedCollection();
fields.addAll(this.owner.query('[isFormField]'));
excFields = new Ext.util.MixedCollection();
excFields.addAll(this.owner.query('form [isFormField]'));

for(i in excFields.items){
    fields.remove(excFields.items[i]);
}

うーん、かっこ悪い。

ComponentQueryをもうちょっと勉強しよう。