古籏一浩のJavaScriptラボ ― 第4回

jQueryとも共存できる「Ext JS 3.0」入門

2009年07月27日 08時00分更新

文● 古籏一浩

はじめてのExt JS～ダイアログを表示する

　必要なファイルの用意ができたらさっそくExt JSを使ってみましょう。はじめに必要なスクリプトとスタイルシートファイルを読み込ませます。


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

　これで準備はOKです……と言いたいところですが、Ext JSには1つ約束事があります。Ext JSでは、レイアウト位置を調整するために透明のGIFファイル（ブランク画像）を利用しています。デフォルトの状態ではこのGIF画像をExt JSのサーバーから読み込むため、表示速度が遅くなる場合があります。

　そこで、Ext JS本体と同じサーバーから画像を読み込むように設定しましょう。画像ファイルのURLは、以下のように Ext.BLANK_IMAGE_URL で指定します。先ほど展開したresourcesフォルダーに専用の画像ファイルが用意されているので、そのファイルパスを指定しましょう。


Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';

　以上で事前準備ができました。いよいよExt JSを使ってアラートダイアログを表示するコードを書いてみましょう。

　通常、JavaScriptでアラートダイアログを表示するには alert() を使いますが、Ext JSでは Ext.Msg.alert() となります。指定する引数は2つあり、最初の引数はアラートダイアログのタイトルに表示する文字列、2番目の引数はアラートダイアログの本文です。

　サンプル01では、ページ内にあるフォームのボタンをクリックするとアラートダイアログが表示されます。


フォームのボタンをクリックすると...		Ext JSのアラートダイアログが表示されます

●サンプル01のソースコード


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Sample</title>
        <link rel="stylesheet" href="resources/css/ext-all.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
        <script type="text/javascript" src="js/ext-base.js"></script>
        <script type="text/javascript" src="js/ext-all.js"></script>
        <script type="text/javascript"><!--
            Ext.BLANK_IMAGE_URL = "resources/images/default/s.gif";
            function displayDialog(){
                Ext.Msg.alert('ASCII.jp','Ext JSを使ってみよう');
            }
        // --></script>
    </head>
    <body>
        <h1>Ext JSアラートダイアログ表示サンプル</h1>
        <form method="post">
            <input type="button" value="アラートダイアログを表示" onclick="displayDialog()">
        </form>
    </body>
</html>

　ユーザーがボタンをクリックしたときではなく、ページの読み込みが完了した段階でアラートダイアログを表示させるとき、JavaScriptでは window.onload や addEventListener() を使いますが、Ext JSでは Ext.onReady() を使います。


Ext.onReady(function(){
　ページが読み込まれたら処理する内容
})

　実際のプログラムがサンプル02です。ページが読み込まれると自動的にアラートダイアログが表示されます。


ページが読み込まれるとアラートダイアログが表示されます

●サンプル02のソースコード


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Sample</title>
        <link rel="stylesheet" href="resources/css/ext-all.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
        <script type="text/javascript" src="js/ext-base.js"></script>
        <script type="text/javascript" src="js/ext-all.js"></script>
        <script type="text/javascript"><!--
            Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
            Ext.onReady(function(){
                Ext.Msg.alert('ASCII.jp','Ext JSを使ってみよう');
            });
        // --></script>
    </head>
    <body>
        <h1>Ext JSアラートダイアログ表示サンプル</h1>
        <p>ページが読み込まれるとダイアログが表示されます。</p>
    </body>
</html>