はじめての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.onload や addEventListener() を使いますが、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>
