Webコピペ屋::ExtJS入門その６『画面にツールバーを表示する』

ExtJS入門その６『画面にツールバーを表示する』

2009/09/01 09:45:49

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

『画面にツールバーを表示する』

デスクトップアプリケーションのようなツールバーを表示してみましょう。

ExtJSでのツールバー表示は

new Ext.Toolbar(第１引数)

を使います。

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

第１引数　：　{項目:値}
height　：　縦幅（ピクセル）
items　：　ボタンやメニューを表示するコンフィグオプション
renderTo　：　表示先のid
width　：　横幅（ピクセル）

となります。（一部ですが）

とりあえず簡単に

var toolbarObject = new Ext.Toolbar({
	renderTo: 'displayToolbar'
});

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

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

<!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";

Ext.onReady(function(){
	var toolbarObject = new Ext.Toolbar({
		renderTo: 'displayToolbar'
	});
});
//]]>
</script>
</head>
<body>
<h1>ExtJS入門サンプル</h1>
<div id="displayToolbar"></div>
</body>
</html>

「renderTo」で指定のid「displayToolbar」に表示します。
たんにツールバー表示していてその中に何もいれていないので細いバーが表示されました。

この中にボタンやらメニューなどを表示することができます。

まずボタンを表示してみましょう。

<!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";

Ext.onReady(function(){
	var toolbarObject = new Ext.Toolbar({
		renderTo: 'displayToolbar',
		items: [{
			xtype: 'tbbutton',
			text: 'ヘルプ'
		}]
	});
});
//]]>
</script>
</head>
<body>
<h1>ExtJS入門サンプル</h1>
<div id="displayToolbar"></div>
</body>
</html>

「ヘルプ」というボタンが表示されました。
この段階ではこの「ヘルプ」というボタンを押しても何もおきません。

itemsコンフィグオプション（{項目:値}）
xtype　：　ボタンの形状
　　tbbutton　：　ボタン
　　tbfill　：　後の要素を右寄にする
　　tbseparator　：　垂直のセパレータ
　　tbspacer　：　空白スペース
text　：　ボタンに表示する文字列
handler　：　ボタンが押下された時の処理

Ext.onReady(function(){
	var toolbarObject = new Ext.Toolbar({
		renderTo: 'displayToolbar',
		items: [{
			xtype: 'tbbutton',
			text: 'ヘルプ',
			handler: function(){
				Ext.Msg.alert('ヘルプ','ExtJSはJavaScriptフレームワークです。');
			}
		}]
	});
});

ボタンが押下された時はアラートダイアログが表示されます。

次にメニューを表示してみましょう。

<!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";

Ext.onReady(function(){
	var toolbarObject = new Ext.Toolbar({
		renderTo: 'displayToolbar',
		items: [{
			xtype: 'tbbutton',
			text: 'コマンド',
			menu: [
				{text: 'はなす'},
				{text: 'じゅもん'},
				{text: 'どうぐ'},
				{text: 'しらべる'}
			]
		}]
	});
});
//]]>
</script>
</head>
<body>
<h1>ExtJS入門サンプル</h1>
<div id="displayToolbar"></div>
</body>
</html>

デスクトップアプリケーションのようにメニューの「コマンド」を押下するとぴらっとサブメニューが出てくるようになります。
これまたこのままだとどのサブメニューを押下しても何も起こりませんが、さきほどと同様にhandlerに処理を渡してやればよいでしょう。

さらにボタンとメニューを並べて表示し間にセパレートをいれて表示してみましょう。

<!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";

Ext.onReady(function(){
	var toolbarObject = new Ext.Toolbar({
		renderTo: 'displayToolbar',
		items: [
			{
				xtype: 'tbbutton',
				text: 'ヘルプ',
				handler: function(){
					Ext.Msg.alert('ヘルプ','ExtJSはJavaScriptフレームワークです。');
				}
			},
			'-',
			{
				xtype: 'tbbutton',
				text: 'コマンド',
				menu: [
					{text: 'はなす'},
					{text: 'じゅもん'},
					{text: 'どうぐ'},
					{text: 'しらべる'}
				]
			}
		]
	});
});
//]]>
</script>
</head>
<body>
<h1>ExtJS入門サンプル</h1>
<div id="displayToolbar"></div>
</body>
</html>

デモはこちら。

「{」から「}」までがひとつ分ということになります。
では「'-'」は何か？
ここでの表現はセパレータになるのですが、実は

{
	xtype: 'tbseparator'
}

と同じことでこのショートカットとなっています。

'->' => xtype:tbfill => 後の要素を右寄にする
'-' => xtype:tbseparator => 垂直のセパレータ
' ' => xtype:tbspacer => タブスペース

と覚えておくとよいでしょう。

ExtJS |

Comment:0 |

コメント投稿