Webコピペ屋::ExtJS入門その５『メッセージダイアログを表示する』

ExtJS入門その５『メッセージダイアログを表示する』

2009/08/31 11:12:21

※2009/12/28に追記修正（2009/12/17にExt JS 3.1リリースのため）

『メッセージダイアログを表示する』

ユーザーに対して一方的に何かメッセージや注意喚起などを見せたい時に使うメッセージダイアログを表示してみましょう。

ちなみにExtJSはバージョン3.0です。

ExtJSでのメッセージダイアログ表示は

Ext.Msg.show(第１引数)

を使います。

引数は１つだがその中でJSON形式となる。

第１引数　：　{項目:値}
buttons　：　表示するボタンを指定（デフォルトは何もなし）
　　Ext.Msg.OK　：　OKボタンのみ
　　Ext.Msg.CANCEL　：　キャンセルボタンのみ
　　Ext.Msg.YESNO　：　Yes、Noボタン
　　Ext.Msg.YESNOCANCEL　：　Yes、No、キャンセルボタン
closable　：　クローズボタンの表示・非表示（true:表示、false:非表示、デフォルトはtrue）
fn　：　ボタンが押下された時の処理
icon　：　表示するアイコン
maxWidth　：　最小の横幅（ピクセル）
minWidth　：　最大の横幅（ピクセル）
msg　：　本文に表示する文字列
title　：　タイトルに表示する文字列

となります。

とりあえず簡単に

Ext.Msg.confirm('メッセージダイアログ','ExtJSはすばらしいフレームワークだー');

書くと、↓こうなります。

その時のソースはこんな感じ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>ExtJS入門サンプル</title>
<link rel="stylesheet" href="../ext-3.1.0/css/ext-all.css" type="text/css" media="all" />
<script type="text/javascript" src="../ext-3.1.0/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.1.0/ext-all.js"></script>
<script type="text/javascript" src="../ext-3.1.0/ext-lang-ja.js"></script>
<script type="text/javascript">
//<![CDATA[
Ext.BLANK_IMAGE_URL = "../ext-3.1.0/images/default/s.gif";

function displayDialog(){
	Ext.Msg.show({
		title: 'メッセージダイアログ',
		msg: 'ExtJSはすばらしいフレームワークだー'
	});
}
//]]>
</script>
</head>
<body>
<h1>ExtJS入門サンプル</h1>
<input type="button" value="メッセージダイアログ表示" onclick="displayDialog();" />

</body>
</html>

デモはこちら。

設定できるプロパティが結構多いのでかなりカスタマイズしたダイアログを表示することができると思います。

ひとつわかりにくいのが「icon　：　表示するアイコン」ですが、どんなものがあるのか以下にあげてみましょう。

icon: Ext.Msg.QUESTION