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

ExtJS入門その８『画面にカード型パネルを表示する』

2009/09/03 10:30:28

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

『画面にカード型パネルを表示する』

パネルにも色々な種類を指定することができるのですが、そのひとつとして「layout: card」を指定したサンプルを作ってみましょう。

作成するサンプルは、パネルに写真を表示しボタンで制御するというものです。

完成ソースは以下のとおり。
デモはこちら。

<!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({
		id: 'cardpanel',
		count: 0,
		title: 'カード型パネル',
		width: 300,
		height: 225,
		layout: 'card',
		activeItem: 0,
		bbar: [
			{
				text: 'Prev',
				handler: navigation.createDelegate(this, [-1])
			},
			'->',
			{
				text: 'Next',
				handler: navigation.createDelegate(this, [1])
			}
		],
		items: [
			{
				html: '<img src="images/photo1.jpg" />'
			},
			{
				html: '<img src="images/photo2.jpg" />'
			},
			{
				html: '<img src="images/photo3.jpg" />'
			},
			{
				html: '<img src="images/photo4.jpg" />'
			}
		],
		renderTo: 'displayPanel'
	});
});

var navigation = function(pNum){
	var panelObject = Ext.getCmp('cardpanel');
	panelObject.count = (panelObject.count + pNum).constrain(0, panelObject.items.length-1);
	panelObject.layout.setActiveItem(panelObject.count);
}
//]]>
</script>
</head>
<body>
<h1>ExtJS入門サンプル</h1>
<div id="displayPanel"></div>
</body>
</html>

予め「images」フォルダに画像を4枚ほど用意しています。
パネルを生成する関数は「new Ext.Panel()」ですが、カード型にする場合は

layout: 'card'

と指定します。

次に表示したいカードの枚数分の内容を定義します。

items: [
	{
		html: '<img src="images/photo1.jpg" />'
	},
	{
		html: '<img src="images/photo2.jpg" />'
	},
	{
		html: '<img src="images/photo3.jpg" />'
	},
	{
		html: '<img src="images/photo4.jpg" />'
	}
]

4枚分用意しました。上から配列の要領で、一番目が「0」、二番目が「1」…となります。
「activeItem: 0」によって最初に表示されるものを制御することができます。
「0」ですので一番目が最初に表示されます。

要はこの写真をペラペラとめくるように制御できればいいわけです。
ボタンがないとはじまりませんので、「bbar」で下部にバーを作り左右に「Prev」「Next」ボタンをそれぞれ設定します。

bbar: [
	{
		text: 'Prev',
		handler: navigation.createDelegate(this, [-1])
	},
	'->',
	{
		text: 'Next',
		handler: navigation.createDelegate(this, [1])
	}
]

「text」はボタンに表示する文字列を指定。「handler」はボタンが押下された時の処理を書く。

少し見慣れない関数

handler: navigation.createDelegate(this, [1])

が出てくるが、流れを説明すると、

１．ボタンを押下
　　↓
２．handlerが動き、createDelegate関数が引数[1]（実際は'1'という値）を自作関数navigationに渡す
　　↓
３．navigation関数は受け取った引数を使ってカード内の写真を入れ替える

という感じ。

ボタンを押下した後handlerで処理をさせるのはExtJSではよくあることだけども、引数をつけてコールバック関数を設定したい場合はこの「createDelegate」を使う必要がある。

最後の３のところは少し説明が必要だろう。要は押されたボタンに従う適切なカード番号を表示しなさいという命令を出している。

var panelObject = Ext.getCmp('cardpanel');

「Ext.getCmp(id)」で上の「panelObject」を取得。ちなみにこのnavigation関数が「Ext.onReady」内にあればこの行は不要。直接「panelObject」でアクセスできる。

panelObject.count = (panelObject.count + pNum).constrain(0, panelObject.items.length-1);

panelObjectインスタンス内の「count」に取得した引数を足し「constrain()」で指定範囲内に値をおさめる。
ちょっとわかりにくいかもしれませんが、

panelObject.count = (panelObject.count + pNum)

だけだと永遠に増えたり減ったりして、実際ない写真が指定されちゃいます。「constrain()」は

constrain(最小値, 最大値)

というようにこいつに値を渡してやると指定した範囲内に収まるように勝手に修正してくれるというちょいと便利なものなんです。

panelObject.layout.setActiveItem(panelObject.count);

ここでは決定されたカード番号を「activeItem:」に設定している。よって選ばれたitemがアクティブになって写真がかわるというわけである。

ちょっと実用的なアプリっぽいのができると少し自信がもてるでしょうか…

ExtJS |

Comment:0 |

コメント投稿