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

Ext JSでGoogleマップを表示するチュートリアル

2009年08月03日 10時21分更新

文● 古籏一浩

※この記事は、「jQueryとも共存できる『Ext JS 3.0』入門」の続きです。前回の記事も合わせてご覧ください。

　統一された美しいデザインのユーザーインターフェイス（UI）を作れるJavaScript/Ajaxフレームワーク「Ext JS」。前回は、Ext JSを使ったもっとも簡単なサンプルとして「アラートダイアログ」を表示してみましたが、今回はより実用的な「ウィンドウ」の表示に挑戦しましょう。Ext JSで開いたウィンドウの中に、GoogleマップAPIを利用した地図を表示します。

単純なウィンドウを表示する

　最初に、もっともシンプルなウィンドウを表示してみましょう。Ext JSのウィンドウには非常に多くのオプション（設定）がありますが、オプションを指定しない状態でもとりあえず表示はできます。

　ウィンドウを表示するには、new Ext.Window() によりインスタンス（ウィンドウオブジェクト）を作成した後、show()メソッドによって実際に画面上に表示する、という手順をとります。ウィンドウを表示する最低限のスクリプトは、以下の2行です。


var win = new Ext.Window();
win.show();


中央に小さくウィンドウと、その部品（クローズボタン）が表示されます

　実行してみると、一応ウィンドウらしきものが表示されましたが、サイズを指定しなかったため、この状態ではとてもウィンドウには見えません。今度はウィンドウの横幅と縦幅を指定してみましょう。

　ウィンドウの横幅はwidth、縦幅はheightで、単位はピクセルで指定します。ただし、ここで指定する幅はウィンドウの外枠も含めたものですので、実際に内容が表示される領域は若干小さくなります。

　たとえば、横幅が520ピクセル、縦幅が480ピクセルのウィンドウを表示する場合は以下のように書きます。


var win = new Ext.Window({
            width: 520,
            height: 480
        });

　これで、ウィンドウらしくなりました。ここまでのスクリプトを含むHTMLのソースコード全文を以下に示します（サンプル01）。


指定したサイズでウィンドウが表示されます

●サンプル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';
            Ext.onReady(function(){
                var win = new Ext.Window({
                    width: 520,
                    height: 480
                });
                win.show();
            });
        // --></script>
    </head>
    <body>
        <h1>Ext JSウィンドウ表示サンプル</h1>
        <p>ページが読み込まれるとウィンドウが表示されます。</p>
    </body>
</html>