まずは入門から

Ext.JS

Learnning Ext JSという洋書を参考にしています。

メッセージボックスを表示させる。onReadyが実行されるのでその中に書く。

<html>
<head>
<title>BI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
	Ext.Msg.alert('Hello', 'World');
});
</script>
</head>
<body>
</body>

次にボタンをつけてみる。

<html>
<head>
<title>BI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
	//これはhttp://extjs.com/s.gif を見に行かないようにするため。
	Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
	Ext.Msg.show(
		{
			title: 'Hello',
			msg: 'こんにちは',
			buttons: {
				yes: true,
				no: true,
				cancel: true
			}
		}
	);
});
</script>
</head>
<body>
</body>

関数にしてみる。

<html>
<head>
<title>BI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
	//これはhttp://extjs.com/s.gif を見に行かないようにするため。
	Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
	function showMsg() {
		 Ext.Msg.show(
			{
				title: 'Hello',
				msg: 'こんにちは',
				buttons: {
					yes: true,
					no: true,
					cancel: true
				}
			}
		);
	}
	Ext.onReady(showMsg());
});
</script>
</head>
<body>
</body>

変数にしてみる。

<html>
<head>
<title>BI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
	//これはhttp://extjs.com/s.gif を見に行かないようにするため。
	Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
	var myMsg =  Ext.Msg.show(
			{
				title: 'Hello',
				msg: 'こんにちは',
				buttons: {
					yes: true,
					no: true,
					cancel: true
				}
			}
	);
	Ext.onReady(myMsg);
});
</script>
</head>
<body>
</body>

ボタンが押された時の動作を記述してみる。

<html>
<head>
<title>BI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
	//これはhttp://extjs.com/s.gif を見に行かないようにするため。
	Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
	var myMsg =  Ext.Msg.show(
			{
				title: 'Hello',
				msg: 'こんにちは',
				buttons: {
					yes: true,
					no: true,
					cancel: true
				},
				fn: function(btn) {
					Ext.Msg.alert("押された", btn);
				}
			}
	);
	Ext.onReady(myMsg);
});
</script>
</head>
<body>
</body>

プロンプトを表示する。

<html>
<head>
<title>BI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
	Ext.Msg.prompt("Hello", "何か入れて");
});
</script>
</head>
<body>
</body>

プログレスバーを表示する。

<html>
<head>
<title>BI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
	Ext.Msg.wait("処理中", "ちょっと待って");
});
</script>
</head>
<body>
</body>