Javascript界隈でも Backbone.js, Knockout.js などのフレームワーク導入を耳にすることが多くなりました。
ExtJSでも ver4.0 以降より、機能種別に分割実装する「MVCアーキテクチャ」という仕組みが導入されています。
詳細はこちら：http://docs.sencha.com/extjs/4.2.0/#!/guide/application_architecture
今回は、"世界で最もミニマムなExt-MVC導入"が目標です。
コントローラとビューを一つずつ用意し、モデルは省略します。
ソースファイルは、下記の計４つです。
・HTMLファイル
・アプリケーション定義ファイル
・コントローラ
・ビュー
１）HTMLファイル - [sample.html]
アプリケーションを起動するHTMLファイルです。
２）アプリケーション定義ファイル - [app.js]
各種設定・使用するコントローラを定義し、起動時の初期処理を行います。
このファイルは、どれほど機能が増えても基本的に一つしか無いはずです。
// 自動ファイル読込機能を有効化する。
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.js]
機能を束ねる中枢です。
使用するビュー・モデル等を定義し、イベントハンドリングを行います。
// コントローラ'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));
}
}
});
}
});
４）ビュー - [Window.js]
見た目に関するコードです。
// ビュー'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
さて、これでブラウザから sample.html へアクセスすると、
テキストボックスが一つだけのポップアップウインドウが表示されます。
"OK"ボタンをクリックすると、入力した値をJSONで表示します。
実際に動作する様子は、こちらです。