SenchaのAPIドキュメンテーションにある Getting Started を読んでみました。なんか最近こんなことばっかやってんなｗ。よくわかんないところは飛ばしてますｗｗ

I. イントロダクション

Ext JSは4、私たちが今までにはExt JSに行った中で最大のオーバーホールによるもので，今まで作成された中で最も高度なJavaScriptフレームワークを構成しています。HTML生成の部分からクラスシステムまで，フレームワークのほとんど全ての部分はアップグレードされています。APIを統一して，信じられないほどの新機能を追加し，フレームワーク全体のパフォーマンスを改善しました。

II. はじめに

1. 必要条件

1.1 Web ブラウザ

Ext JS4はインターネット・エクスプローラー6からChrome11までほとんどのブラウザをサポートします。開発するには，最良のデバッグ環境がある，以下のブラウザを主として使うことを進めます:

1.2 デバッグツール

開発を支援するための利用方法がわかるように，各ブラウザでのお勧めのツール専用のデバッグハンドブックガイドを参照してください。

1.3 Web Server

ローカルのWebサーバーは，Ext JS 4を使用する上の必要条件ではありませんが，ローカルWebサーバーを使って開発することが強く推奨されます。

1.4. Ext JS 4 SDK

Ext JS 4 SDK をダウンロードしてください。パッケージをWebルートディレクトリに展開します。このガイドでは，http://localhost/ext-4.0p がトップレベルディレクトリを指すと仮定します。

ブラウザで http://localhost/ext-4.0/index.html を開いてください。ウェルカムページが表示されたら準備完了です。

2. アプリケーション構造

必須ではありませんが，以下に記載されたすべての提案は，アプリケーションを整然として，拡張性があり，保守性もある状態に保つガイドラインになります。

2.1 基本構造

- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html

in which:

appname は，すべてのソースファイルを格納するディレクトリです。
app すべてのクラスを配置します。名前の付け方は Class System ガイドに記載された規則に従います。
resources には，プリケーションのルック・アンド・フィールを担当する追加CCSや画像ファイルを配置します。また静的なリソースも（XML、JSONなど）もここに置きます。
index.html はエントリーポイントの HTML ファイルです。
app.js にはアプリケーションのロジックを記述します。

Ext JS アプリケーションは，単一のHTMLドキュメントで自己完結します。中身のフォーマットは次のとおりです：

<html>
<head>
    <title>Application Name</title>

    <link rel="stylesheet" type="text/css" href="path/to/sdk/resources/css/ext-all.css">
    <script type="text/javascript" src="path/to/sdk/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

whereby:

path/to/sdk は，セクション1.4でダウンロードしたExt JS 4 SDK のディレクトリを指します。
path/to/sdk/resources/css/ext-all.css はフレームワーク全体で使うスタイル情報。
path/to/sdk/ext(-debug).js はExt JS 4 のコアライブラリ (もしくは path/to/sdk/ext-all(-debug).js あとで説明します)

このポイントからは、あなたは、2つの異なったライブラリ包含メソッドを選ぶ必要があります。それぞれには、以下に記載されたそれ自身の賛否両論があります:

フレームワーク全てが入っている，path/to/sdk/ext-all.js (path/to/sdk/ext-all-debug.js は開発時用)をインクルードする。
- 長所:
  - デフォルトExt JSのコンポーネント(あなたのカスタムクラスでないもの)を使用するとき依存関係を心配する必要が全くありません。
- 短所:
  - .アプリケーションがライブラリが提供するものすべてを利用しないのなら，デプロイメントされるファイルサイズが不要に大きくなります。その結果，ネットワークデータ転送オーバーヘッドがあるとともに，不要なスクリプトが実行されるので，アプリケーションの初期化が遅くなります。
  - すべてのソースコードが1個の大きいファイルの中にはいっているので，デバッグが難しくなります。
最小のコアライブラリだけが入ってる path/to/sdk/ext.js (path/to/sdk/ext-debug.js は開発時用) をインクルードし，Ext.Loaderを使って依存関係の自動解決する。
- 長所:
  - アプリケーションはあなたが展開するとき、あなたのアプリケーションは、まさにそれが必要とするものをロードするだけです。配布しているファイルサイズは最小量になるでしょう。すべてのソースファイルが切り離された状態でロードされるので、デバッグは、簡単であって、簡単です。誤りメッセージはそれらが起こる正確な行番号とファイル名と共に来ます。
  - アプリケーションは必要なものだけをロードするので，デプロイされるファイルのサイズは最小になります。
  - すべてのソースは分離されているのでデバッグは単純で簡単です。エラーが発生した正確な行番号やファイル名がわかります。
- 短所:
  - SDKと共に出荷されたデフォルトコンポーネントを使うときに，依存関係に注意が必要です。

要約すると，初期のラーニングカーブを短くしたいのなら ext-all(-debug).js を使うことが推奨されます。一方， ext(-debug).js は実際のアプリケーション開発のほとんどの場合に好まれます。

最後にとても重要なことを，

Last but not least, app.js はアプリケーションロジックのエントリーポイントです。基本的なアプリケーションでの標準的なフォーマットは次のようになります：

// Register namespaces and their corresponding paths to Ext.Loader

Ext.Loader.setPath({
    'AppName': 'app',
    ... // Other namespaces
});

// Specify a list of classes your application your application needs
Ext.require([
    ...
]);

// Application's initialization
Ext.onReady(function() {

    ...

});

2.2 MVC (Model-View-Controller) 構造

Ext JS 4 shipped with a robust MVC architecture which maximize extensibility and maintainability for medium to large scale applications. Please refer to the MVC Application Architecture guide for detailed instructions.

Ext JS4 は，中規模から大規模なアプリケーションのために拡張性と保守性を最大にする、堅牢なMVCアーキテクチャと共に出荷されました。詳しくは MVC Application Architecture guide を参照してください。

3. デプロイメント

新顔のSehcha SDKツール（ここからダウンロードできます）は，Ext JS4アプリケーションのデプロイメントをこれまでより簡単にします。このツールは全ての依存関係のマニフェストをJSB3ファイル（JSBuilderファイルフォーマット）の形式で生成できます。

SDKツールをインストールしたら，ターミナルウィンドウを開いて，アプリケーションのディレクトリに移動します。

cd path/to/application

ここからいくつかの簡単なコマンドを走らせます。最初はJSB3ファイルを生成します：

sencha create jsb -a index.html -p app.jsb3

index.html をスキャンして，アプリケーションで実際に使われているファイルを調べて，app.jsb3 というJSBファイルを生成します。

ビルドする前に，生成されたファイルを変更することができます。これはコピーするカスタムリソースがある場合に便利ですが，ほとんどの場合，そのまま続けて二番目のコマンドでアプリケーションをビルドします。

sencha build -p app.jsb3 -d .

これはJSB3ファイルを引数にとってapp-all.js ファイルを作ります。このファイルはあなたのアプリケーションに加えて，実行時に必要とされるExt JS クラスの全てのミニマイズビルドです。また，all-classes.js ファイルも作られます。これは app-all.jsと同じクラスですが，ミニファイされていないのでビルドしたアプリケーションのデバッグの時に便利です。つまり app-all.js は all-classes.js と app.js.をミニファイした出荷バージョンです。

ほとんどのアプリケーションでは出荷用バージョンには，別のindex.html が必要になります。通常は，出荷版のindex.htmlファイルは次のようなものになります：

<html>
<head>
    <title>Application Name</title>

    <link rel="stylesheet" type="text/css" href="path/to/sdk/resources/css/ext-all.css">
    <script type="text/javascript" src="path/to/sdk/ext.js"></script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

セクション2.1の開発バージョンと比べてみると，この出荷バージョンでは Notice that path/to/sdk/ext-debug.js が path/to/sdk/ext.js になり， app.js が app-all.js に変わっていることに注目してください。

PHPやRubyASPなどのようなサーバーサイドの動的言語の先頭のビルド

PHP，Ruby，ASPなどのような動的なサーバサイド言語で作られたアプリケーションでは，最初のコマンドの index.html をアプリケーションの実際のURLに変えることができます。このURLは開発中にブラウザに表示されているものと同じにします。例えば:

sencha create jsb -a http://localhost/path/to/application/index.php -p app.jsb3

このガイドは執筆中です

Please check back soon

Sunvisor Lab. Ext JS 別館

Ext JS 関連の話題を取り上げます。

Getting Started