Webコピペ屋::ExtJS入門その７『画面にパネルを表示する』

ExtJS入門その７『画面にパネルを表示する』

2009/09/02 09:55:39

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

『画面にパネルを表示する』

パネルとは情報等を表示する領域ボックスのことです。というと何のことかわかりませんし、後ほど出てくる『画面にウィンドウを表示する』のウィンドウと何が違うのかは難しいところです。

厳密には規定できないかもしれませんが、ウィンドウとの違いをいうのであれば、ウィンドウは単体で動くように振る舞いドラッグしたり消したりできるのに対し、パネルは画面の決まった箇所に固定で表示するボックス領域のこと…ぐらいに捉えておくといいのではないでしょうか。。。

ExtJSでのパネル表示は

new Ext.Panel()

を使います。

縦横を指定して簡単に表現してみます。

<!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 panelObject = new Ext.Panel({
		title: 'パネルのタイトル',
		width: 400,
		height: 200,
		html: '<span style="color:#FF0000;">ここにHTMLタグを使うこともできます。</span><br>改行してこんにちは',
		renderTo: 'displayPanel'
	});
});
//]]>
</script>
</head>
<body>
<h1>ExtJS入門サンプル</h1>
<div id="displayPanel"></div>
</body>
</html>

こうなります。

デモはこちら。

上記のような簡単な表現でのパラメータはあまり説明の必要はないように思いますが、マニュアルを見る限りかなりの設定値があるようですのでより複雑になるととたんにややこしく難しいこと請け合いです。

まぁそんなこといってもはじまりませんので、これをちょっとずついじってみましょう。

パネルを横にふたつ並べて表示します。

<!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 panelObject = new Ext.Panel({
		width: 400,
		height: 200,
		layout: 'border',
		items: [
			{
				title: '左タイトル',
				html: '左メニュー',
				region: 'west'
			},
			{
				title: '右タイトル',
				html: '右に内容',
				region: 'center'
			}
		],
		renderTo: 'displayPanel'
	});
});
//]]>
</script>
</head>
<body>
<h1>ExtJS入門サンプル</h1>
<div id="displayPanel"></div>
</body>
</html>

パネル内をitemsを使って「west」「center」に分けて2分割表示しています。

デモはこちら。

「layout」で「border」をしているので当然、north-west-center-east-southの5つを指定できるので下記のように5分割表示することもできます。
またそれぞれ「split:true」で表示サイズをドラッグで変更できるようになるのですが、どの領域に指定するとどこがドラッグ可能となるのかも赤でわかるようにしてみました。「center」領域に向かってドラッグ可能バーが出るようになっているみたいです。よって「center」に指定しても何もおこりません。

ソースはこちら

Ext.onReady(function(){
	var panelObject = new Ext.Panel({
		width: 400,
		height: 200,
		layout: 'border',
		items: [
			{
				title: '西',
				html: '西内容',
				split: true,
				region: 'west'
			},
			{
				title: '中央',
				html: '右に内容',
				region: 'center'
			},
			{
				title: '東',
				html: '東内容',
				split: true,
				region: 'east'
			},
			{
				title: '北',
				html: '北内容',
				split: true,
				region: 'north'
			},
			{
				title: '南',
				html: '南内容',
				split: true,
				region: 'south'
			}
		],
		renderTo: 'displayPanel'
	});
});

デモはこちら。

また、このようにドラッグでリサイズ可能にしてしまうとどこまでもバーをひっぱることができますが、可変可能な領域を指定することもできます。

Ext.onReady(function(){
	var panelObject = new Ext.Panel({
		width: 400,
		height: 200,
		layout: 'border',
		items: [
			{
				title: '左タイトル',
				html: '左メニュー',
				split: true,
				minSize: 50,
				maxSize: 200,
				region: 'west'
			},
			{
				title: '右タイトル',
				html: '右に内容',
				region: 'center'
			}
		],
		renderTo: 'displayPanel'
	});
});

「minSize」「maxSize」を指定するとそれ以上ドラッグできなくなります。

デモはこちら。

また、「collapsible: true」を指定すると

Ext.onReady(function(){
	var panelObject = new Ext.Panel({
		width: 400,
		height: 200,
		layout: 'border',
		items: [
			{
				title: '左タイトル',
				html: '左メニュー',
				collapsible: true,
				region: 'west'
			},
			{
				title: '右タイトル',
				html: '右に内容',
				region: 'center'
			}
		],
		renderTo: 'displayPanel'
	});
});

矢印ボタンがつきパネルを折りたたみ可能とすることもできます。

デモはこちら。

というように他にも色々なオプション、パラメーター等がありますのでマニュアルを見ながら色々試してみるといいでしょう。

ExtJS |

Comment:0 |

コメント投稿