このページの本文へ

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

jQueryとも共存できる「Ext JS 3.0」入門 (3/4)

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.onloadaddEventListener() を使いますが、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>


この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く