このページの本文へ

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

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

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

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

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

Ext JS

 統一された美しいデザインのユーザーインターフェイス(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();


Ext JSサンプル
中央に小さくウィンドウと、その部品(クローズボタン)が表示されます

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

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

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


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


 これで、ウィンドウらしくなりました。ここまでのスクリプトを含むHTMLのソースコード全文を以下に示します(サンプル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';
            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>


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

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング