※この記事は、「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>
