ExtでHello World - うなの日記

Extに手を出してみました。インストールからメッセージダイアログを使ったHelloWorldまで。

Extのダウンロードとインストール

ExtからExtのアーカイブをダウンロードして展開します。
- 最新の version 2.0 を使いました。
必要なモジュールをHTMLに取り込みます。
- 「アダプタ」,「Ext」,「ExtのCSS」が必要です。
  - 「アダプタ」はAjaxリクエストやイベントハンドリングで使うモジュールです。組み込みのもの、jquery,YUI,prototype.jsのいずれかを選択できます。
- ロード順は「アダプタの依存モジュール(prototype.jsなど)」→「アダプタ」→「Ext」の順にします。

<!-- 
  アダプタの設定。
  組み込みのもの、jquery,YUI,prototype.jsのいずれかが選択できる。以下は組み込みのものを使った例。
  ext-all.jsより先に読む必要がある。
-->
<script type="text/javascript" src="../lib/ext-2.0/adapter/ext/ext-base.js"></script>

<!--
他のアダプタを使いたい場合はそれぞれ以下のモジュールを読み込む。

jqueryを使いたい!
<script type="text/javascript" src="../lib/ext-2.0/adapter/jquery/jquery.js"></script>
<script type="text/javascript" src="../lib/ext-2.0/adapter/jquery/jquery-plugins.js"></script>
<script type="text/javascript" src="../lib/ext-2.0/adapter/jquery/ext-jquery-adapter.js"></script>

YUIを使いたい!
<script type="text/javascript" src="../lib/ext-2.0/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../lib/ext-2.0/adapter/yui/ext-yui-adapter.js"></script>

protorype.jsをがいい!
<script type="text/javascript" src="../lib/ext-2.0/adapter/prototype/prototype.js"></script>
<script type="text/javascript" src="../lib/ext-2.0/adapter/prototype/ext-prototype-adapter.js"></script>
-->

<!-- ExtのライブラリとCSSを読み込む -->
<script type="text/javascript" src="../lib/ext-2.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/ext-2.0/resources/css/ext-all.css" />

メッセージダイアログの表示

Ext.onReady()でDOMのロード完了時に実行する関数を指定できます。この関数が実行される時にはすべてのDOM要素がロード済みであることが保証されます。(サンプルではこの中でExtを利用していたので、それに習ってこの中にダイアログ表示のコードを書きました。Extはこの中で呼ばないといけないとかそんなルールがあるのかも。)

ダイアログの表示はExt.MessageBox.showで行います。

// すべてのDOMエレメントのロード完了後に呼ばれる関数。
Ext.onReady(function(){
    // メッセージダイアログの表示
    Ext.MessageBox.show({
        title:'Hello',
        msg: "Hello Ext World!",
        width:400,
        buttons: Ext.MessageBox.OK
    });
});

サンプルはこちら