Ext JS 4 イントロダクション – Perfect Day #003 資料

Ext JS 4 イントロダクション

Ext JS 4 プレビューが先日リリースされました。
みなさんは、もう試しましたか？これから、Ext JS 4で開発を行うために必要な知識をご紹介します。

Ext JS 3 互換レイヤー

Ext JS 4で定義されたクラスなどに対するエイリアスを設定するためのJSファイルです。
Ext JS 4の正式リリースまでに準備する予定らしいですが、既に、examples/ext3-compat.jsとして配置されています。
ただ、すべての機能が現時点で対応されているわけでは無いようです。

新たにExt JS 4で開発を行う場合は、不要でしょう。
古いコードサンプルを持ってきて動かす場合は別でしょうが、Ext JS 4のパワフルな機能を利用するには不要な作業です。

サンドボックスモード

Ext JS 4では、サンドボックスモードが導入されました。
コレにより、旧バージョンのExt JSとの共存が可能になります。
サンドボックス版のJSファイルはext-core-sandbox-debug.jsという名前の通り、sandboxという名前が含まれます。
Ext JS 4のオブジェクトは通常Extというグローバル変数(window下)に作成されますが、Ext4という名前で作成され完全に分離されます。

CompassとSASSという技術でCSS3ベースのデザインテーマが採用されているExt JS 4では、混合したバージョンを含むページのデザインを変更するのは非常に困難です。
Ext.baseCSSPrefixプロパティで指定される名前が接頭辞として付加されるため、1ページ丸ごとの変更であれば、容易に行うことが可能です。

ブートポイントのパラダイムチェンジ

さぁ、Ext JSを使おうと思ったら、すぐExt.onReadyを記述とした人。古いです。確かに、Ext JS 4でも記述はできます。いままでのExt.onReadyはExt JS 4からExt.onDocumentReadyに代わり、Ext.onReadyはExt.Loader.onReadyのシノニム（エイリアス）でになります。
利用者からは、あまり影響が無いかも知れません。

さて、では何が古いのか？onReadyはもう記述しないということです。
プレビュー版では、予告されていたSencha Commandが見当たりませんが、今後Sencha Touch同様Ext JS 4でもMVCで記述していくの主流になりそうです。

では、Ext JS 4を利用するにあたり、何をすべきか？を追っていきます。

HTMLファイルの準備

変わらずHTMLファイルを準備することから始まります。
しかし、読み込むものが違います。

CSSファイル

JSファイル

extdirはそれぞれのExt JSを配置したディレクトリまでのパスになります。
いままで、CSSファイルはext-all.cssを読み込んでいましたが、ext.cssに変更されました。
また、JSファイルも

• adapter/ext/ext-base.js
• ext-all.js

から、bootstrap.jsに変更されています。

アプリケーションクラスの作成

さて、読み込みは成功しましたか？では、ユーザーコードを記述していきます。
いままで、とりあえずonReadyを記載するといっていましたが、古いといった点を解説していきます。

とりあえず、GitHubにアプリケーションコードを乗せてあります。
https://github.com/xenophy/PerfectDay/blob/master/public_html/setup/src/app/perfectday.js

まず、やるべきことは、Ext.regApplicationでアプリケーションを登録することです。
設定は、オブジェクト（コンフィグオプション）で行います。

name	アプリケーションの名前を指定します。
autoInitViewport	プレビュー版では、Sencha TouchのExt.regApplication/Ext.Application(Ext Platform)がそのまま移植されたままのようで、この設定をfalseにしないと、例外が発生してしまいます。
defaultUrl	デフォルトのURL（URLといっていますがハッシュ）を指定します。
launch	アプリケーションのブートポイントとなる関数オブジェクトを指定します。いままでのonReadyに指定していた関数オブジェクトがこの位置に相当します。

この状態でアクセスして、launchの関数オブジェクトがコールされればひとまず成功です。

ルーター設定

さぁ、早速ブートポイントも決まったことだし、ユーザーコードを書いていこう！とおもった人は、ちょっと待ってください。
Ext JSにはExt.Historyというクラスがあり、俗に言う「戻るボタン」の制御が行えます。一度作り上げたアプリケーションをこのExt.Historyに対応させるのは一苦労です。
アプリケーション登録を行うスタイルにすることで、このExt.Historyに対応させるかどうかを後で調整することも容易になります。

そこで必要になってくるのがExt.Routerクラスです。
ルーターという名前の通りルーティングを行うクラスなのですが、URLに指定されたハッシュを元に、これから作成するコントローラを制御します。

ルーティング設定を行うためには、Ext.Router.drawメソッドを利用します。
無名関数を設定して、引数で渡ってくるmapオブジェクトにルートを設定していきます。

上記の例では、dashboardというハッシュに対して、dashboardコントローラーのindexアクションを実行するように指定しています。

ここで、アプリケーションクラスの設定で指定した、defaultUrlが効いてきます。
defaultUrlにdashboardを指定しました。つまり未指定の場合は、dashboardをいうハッシュをつけて実行してくれるようになります。

コントローラークラス作成

さて、ルーターでハッシュに対して、どのコントローラーとアクションを実行するかのルーティング設定を行いました。
しかし、まだコントローラーを作成していないため、動作しません。

早速、コントローラーを作成してみましょう。
コントローラーコードは次のようになります。

コントローラーの登録は、Ext.regControllerを利用します。アプリケーション同様オブジェクトリテラルで指定します。
オブジェクトのキーがアクション名になります。
そこに関数オブジェクトを指定することで、ルーターが呼び出してくれます（dispatchされます）。

このサンプルでは、console.logで文字列を出力しているので、ブラウザのコンソールをご確認ください。
ディスパッチされるアクション関数オブジェクトは、launchが実行されたあとにコールされていることがわかると思います。

ビュー設定と配置

さて、ではビューを作成します。ビューはどちらかというと、いままで普通に作ってきたコンポーネントの定義です。
コンポーネントを定義するということは、大概なんらかのクラスを継承して自分のアプリケーション用のクラスを作成してきませんでしたか？

ここでは、Viewportを継承したクラスを作成します。そこで、Ext.extend！、まった！！
これからの継承は、Ext.defineを利用します。

Ext.defineの詳しい使い方については別途機会を設けて説明したいと思います。
コレ一つだけで結構重い・・。

MVC形式でアプリケーションを構築する場合、ビュークラスはAppName.views下に配置します。
viewsというキーはアプリケーション生成時に自動的に作成されます。
なので、今回は、PerfectDay.views.Viewportというクラスを作成します。

あとは、今まで通り。
通常通り、initComponentをオーバーライドして、スーパークラスメソッドコールするだけです。