Android

iPhone

ケータイ

ニュースメール

ニュース検索

ピックアップ

キャリア

スペシャルリンク

ピックアップメニュー

パートナーサイト

今週のIT求人情報

ソフトブレーン株式会社
コンサルティング営業

アクセンチュア株式会社
ビジネスプロセス／テクノロジーコンサルタント

アウンコンサルティング株式会社
Webコンサルティング営業

j.i.c メディア

ニュース＞テクノロジー

2010年1月22日 10:00

EXTJSのウィンドウを使ってみる

株式会社環

■はじめに
今回は、ウィンドウクラスをご紹介します。
ウィンドウクラスも、EXTJSに最初から用意されているウィジェットクラスです。前回までで、ご紹介したウィジェットとは違い、パネルクラスを継承していないクラスとなります。多少、操作感に違いはありますが、基本部分に関しては、大きな違いがありませんので、今までのコラムを読んで頂いている方であれば、多少なりとも感が働いてくるかと思います。

■ウィンドウクラス
ウィンドウクラスは、その名の通りポップアップウィンドウを表示するためのクラスです。
サイズ変更可能なウィンドウや、ダイアログウィンドウなどの作成なども行えます。また、パネルクラスなどと組み合わせることにより、多彩なウィンドウを作成し表示することが可能です。
EXTJSでは、ウィンドウクラスを、
　　Ext.Window
として定義していますので、これをインスタンス化することにより以下のような画面を表示することができます。

ウィンドウクラス1

■簡単な例
先ほどのキャプチャイメージを実現するためのサンプルコードを以下に示します。
――――――――――――――――――――――――――――――――
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィンドウクラスサンプル</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

<script type="text/javascript">
    Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

    Ext.onReady( function()
    {
  var win = new Ext.Window({
   title: 'ウィンドウサンプル',
   html:   'ウィンドウサンプルです。',
   width: 500,
   height: 300,
   plain: true
  });

  win.show();
} );
</script>
</head>

<body>
</body>
</html>
――――――――――――――――――――――――――――――――

ウィンドウクラスを使うには、ウィンドウクラスをインスタンス化して、show()メソッドで表示させるという手順となります。
今回は、ウィンドウ内に簡単なテキストのみを表示するためにhtmlパラメータを使い、テキストを設定しています。ウィンドウ表示時の高さ・幅は、width、heightパラメータにて指定します。
これだけのことで、簡単にポップアップするウィンドウが表示できます。

■モーダルとモードレス
ウィンドウには、モーダルウィンドウとモードレスウィンドウの二つのモードがあります。
モードレスウィンドウというのは、先ほどのサンプルでお見せしたような、ウィンドウを表示しつつ、他に表示されているウィンドウを操作したり、ベースとなっているHTML画面上を操作したりすることのできるモードのことです。
一方、モーダルウィンドウというのは、ダイアログウィンドウに代表されるように、そのウィンドウが表示されている間は、そのウィンドウの操作しか行えないモードのこととなります。
以下にその違いが分かるサンプルを示します。
――――――――――――――――――――――――――――――――
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィンドウクラスサンプル</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

<script type="text/javascript">
    Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

var n = 0;
    Ext.onReady( function()
    {
  var button1 = new Ext.Button( {
   applyTo: 'button1',
   text:    'モードレスウィンドウ表示',
   handler: function(){
    var win = new Ext.Window( {
     x:      100 + n * 20,
     y:      100 + n * 20,
     width: 200,
     height: 300,
     title: 'モードレスウィンドウ',
     html:   (n + 1) + '番目のウィンドウです。',
     modal: false
    } );
    win.show();
    n++;
   }
  } );

  var button2 = new Ext.Button( {
   applyTo: 'button2',
   text:    'モーダルウィンドウ表示',
   handler: function(){
    var win = new Ext.Window( {
     width: 200,
     height: 300,
     title: 'モーダルウィンドウ',
     modal: true
    } );
    win.show();
   }
  } );
} );
</script>
</head>

<body>
<div id="button1"></div><br>
<div id="button2"></div><br>
</body>
</html>
――――――――――――――――――――――――――――――――

このサンプルでは、まず、二つのボタンが表示されます。
「モードレスウィンドウ表示」というボタンを、２、３度クリックしてみてください。ボタンを押下する度にウィンドウが次々と表示されるかと思います。また、このボタンで表示されたウィンドウは、常にアクティブ状態を切り替えることができますし、場所の移動が行えます。

ウィンドウクラス2

この状態で、次に「モーダルウィンドウ表示」というボタンをクリックしてみてください。
今度は、HTML上にマスクがかかり、このボタンで表示されたウィンドウ以外、操作できない状態になります。

ウィンドウクラス3

この違いは、modalパラメータによるものです。このパラメータにtrueを設定するとモーダルとなり、falseまたはパラメータそのものが存在しない場合には、モードレスになります。
なお、ご注意頂きたいのは、他の言語のように、モーダル指定のウィンドウをshow()メソッドにより表示しても、このshow()メソッドでコード待機は行いません。

■表示アニメーション
面白い機能として、表示時に簡単なアニメーションを指定することができます。
show()メソッドの第１引数に表示開始となるターゲット要素を指定すると、その部分からウィンドウがアニメーションして表示されるようになります。
――――――――――――――――――――――――――――――――
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィンドウクラスサンプル</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

<script type="text/javascript">
    Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

var n = 0;
    Ext.onReady( function()
    {
  var button1 = new Ext.Button( {
   applyTo: 'button1',
   text:    'モードレスウィンドウ表示',
   handler: function(){
    var win = new Ext.Window( {
     //x:      100 + n * 20,
     //y:      100 + n * 20,
     width: 200,
     height: 300,
     title: 'モードレスウィンドウ',
     html:   (n + 1) + '番目のウィンドウです。',
     modal: false
    } );
    win.show('anime');
    n++;
   }
  } );
} );
</script>
</head>

<body>
<div id="anime" align="center">ここから</div>
<br>
<div id="button1"></div><br>
</body>
</html>
――――――――――――――――――――――――――――――――

■最後に
今回のコラムではウィンドウの表示に関してご紹介させて頂きました。何らかの入力をポップアップウィンドウで行わせるような場合、今回のこの機能が使えるのかと思います。
応用機能として面白いものに、GoogleMapをウィンドウ内に表示するサンプルがEXTJSのexmaplesフォルダにありますので、そちらもご参照して頂ければ応用例が広がるのではないでしょうか。

記事提供：株式会社環