Ext.js 2.0 beta1 + jQuery の導入

jQueryはウェブサイトを作るには素晴らしいライブラリですが、管理画面のようなウェブアプリケーションに近いものの制作にはあまり向いていません。（ちょっと管理画面を制作する必要が出てきたのです）

最近リリースされたjQuery UIも試してみたのですが、情報が少ない、公式サイトからダウンロードしたスクリプトがエラーになる、サンプルで使われているものを強引にダウンロードするとファイルサイズが違うなど、まだ実用レベルに達していないようです。

そこで、以前から注目していたExt.jsを使って制作してみようかと思います。Ext.jsは美しいUIが特徴のAjaxライブラリです（2007年4月1日に1.0がリリースされました）。現在は単体でも動作しますが、もともとほかのライブラリと組み合わせて使うように設計されました。現在もこの設計は残っており、使い慣れたjQueryと組み合わせて使えます。今回は現在公開されているExt.js 2.0 beta1とjQueryの1.2.1をつかって開発します。

まず、Ext.jsのダウンロードページから2.0 beta1のzipをダウンロードします 。jQueryも手元になければjQueryの公式サイトから最新版（ブログ記述時点では1.2.1）をダウンロードしておきます。

jQueryは1ファイルなので問題ないですが、ext.jsはzipファイルを解凍すると1500ファイル近くでてきてしまうので必要なファイルだけ取り出します。jQueryと合わせて使う場合はadapter > jqueryフォルダにある以下の2ファイルが必要です。

• ext-jquery-adapter.js
• jquery-plugins.js

jquery.jsもありますが公式サイトから落としてきた最新版を利用しても問題ありません（僕が使った限りではですが。。）。あとはトップ階層にある以下の２ファイルを取り出せばjsファイルは全部です。

• ext-all.js
• ext-all-debug.js

あと、resourcesの中の以下も取り出しておきます。

• css/ext-all.css
• imagesフォルダ

これでファイルはすべてそろいました。ベースとなるhtmlに次のような順番で読み込ませましょう（2007.11.21順序修正、uasiさんコメントでの指摘ありがとうございます！）

1. jquery.js（jquery本体）
2. jquery-plugins.js（ext.jsが使う必須プラグイン）
3. ext-jquery-adapter.js
4. ext-all.css

jQueryを使わない場合はadapter>extにあるext-base.jsを以下のように読ませてもOKです。（2007.11.21修正）

1. ext-base.js
2. ext-all.css

ちょっと長くなってしまったので実際のコードの書き方は別の記事で書きます。