ext.js

数あるAjaxフレームワークの中でも、もっともエフェクト処理が美しいフレームワークに「Ext.js」があります。
オフィシャルサイトのデモンストレーションを見るだけでも、うっとりするほど動きが美しいことが分かります。

»Ext Documentation Center

しかし、「美しいものにはとげがある」の言葉通り（？）、Ext.jsを利用するのは意外と大変。ドキュメントも親切なようで、大事な情報がいまいち載っていなかったりします。
そこで、備忘録もかねて今回「ダイアログを表示する」というスクリプトにチャレンジしてみたので、やり方を紹介しましょう。

1. Ext.jsを手に入れる

まずは、Ext.jsをダウンロードします。
»Download Ext JS Library

「Build your own Ext」という、必要な要素だけを選んでダウンロードできる機能もありますが、いまいちなにが必要か分からなかったので、ここでは全部入りをダウンロードしました。

2. JSファイルと CSSファイルの組み込み

次に、JSファイルと CSSファイルの組み込み。これが、非常に難しく見えて非常に簡単でした。JSファイルも CSSファイルもたくさん収録されているのに、ダイアログの表示に必要なファイルがどれかというのが、ドキュメントに書いていなかったのです。いろいろ試行錯誤したり、サンプルサイトのソースを見て理解できました。「-all」を使えばよいのでした。
というわけで、次のように組み込みます。

<link rel="stylesheet" type="text/css" href="_js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="_js/ext/ext-all.js"></script>


また、Ext.jsは単体でも利用できますが、Prototype.js、jQuery、Yahoo! UI Libraryのいずれかを利用している場合は「アダプタ」を利用して、それらのフレームワークを利用することができるようです。私の場合、Prototype.jsを使っているので次のようにしてアダプタを組み込みます。

<script type="text/javascript" src="_js/prototype.js"></script>
<script type="text/javascript" src="_js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="_js/ext/ext-prototype-adapter.js"></script>


3. ダイアログの元を作る

次に、表示させるダイアログの内容を記述します。ページ内の適当な場所に作って、「style="display: hidden"」などとして隠しておくと良いでしょう。

<div id="areaDialog">
<div class="x-dlg-hd">ダイアログのタイトル</div>
<div class="x-dlg-bd">
ダイアログの内容
</div>
</div>


「x-dlg-hd」と「x-dlg-bg」というクラス名のついたdivに、それぞれ内容を入れ込み、id属性を付加した