Ext JS入門3　Viewportを使う

3件のコメントがあります

こちらでViewportにコンフィグについて、もう少し詳しく紹介しています。

http://extjs.blog.sus4.co.jp/2009/11/09/extjs-tutorial4/

Ext JSの花形の機能がViewportです。Viewportを使うことでブラウザの画面全体をExt JSで支配することができます。たった一つの小さなHTMLの上にViewportを使って様々なアプリケーションを構築することができます。Viewportは一言で言うと、ブラウザの画面を支配する特殊なパネルクラスと言えます。

Ext.Viewportのコンフィグ

ExtJSではクラスのインスタンスを生成するときに、様々なコンフィグオプションを設定して、必要なクラスを作っていきます。それぞれのコンフィグがどんな設定をするかはAPIリファレンスで確認することができます。APIリファレンスのクラスの説明のすぐ下にリスト表記されています。

Viewportで使用するコンフィグの基本的な2つがlayoutとitemsです。Viewport内のパネルのレイアウトを指定するのがlayoutコンフィグで、Viewport内に配置するパネルを指定するitemsコンフィグにあります。これらの二つは必須の設定になっているので、必ず指定しなければいけません。

layoutコンフィグ

現在使用できるレイアウトはabsolute、accordion、anchor、auto、border、card、column、fit、form、hbox、menu、table、toolbar、vboxの14種類があります。代表的なものを下に上げておきます。それぞれのlayoutに関してはhttp://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.htmlにサンプルがあります。

accordion：アコーディオンのようなパネルがたたみこまれたビューを作ります。
anchor：Viewport内の任意の位置にパネルを配置します。
border：上下左右に仕切られたパネルを配置します。
card：パネルをトランプのカードをめくるように入れ替えて表示します。
column：縦方向にパネルを仕切ります。
fit：パネルをViewportの内側にぴったり合わせて表示します。
form：フォームに特化したパネルを配置します。
table：表のように行・列方向のグリッドにパネルを並べます。

これらの中でborderとfitがよく使われます。

itemsコンフィグ

Viewportの中に配置されるものはパネルになります。Viewportの中はExt JSで支配されています。配置するパネルはitemsのコンフィグオプションで配列で指定します。layoutコンフィグによってはitemsに設定されるパネルの特定のコンフィグが必須になる場合があります。例えばborderレイアウトの場合はパネルのコンフィグにregionコンフィグを設定しなければいけません。

では実際にViewportを作って見ます。

1.HTMLファイルの準備

典型的なExt JSのHTMLです。Viewportを使うときはext-all.jsを読み込むべきです。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xh    tml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Viewport Sample</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--ext js-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!--自分のjs-->
<script type="text/javascript" src="../js/ext/myApp.js"></script>

</head>
<body>
<div class="body">
</div>
</body>
</html>

2.JSファイルの記述

2-1.fitレイアウト

Viewportを作るにはExt.Viewportクラスのインスタンスを作ります。Ext.onReadyの中でExt.Viewportのインスタンスを作ります。今回はまずfitレイアウトでViewportを作ります。


Ext.onReady(function(){
new Ext.Viewport({
layout:'fit',
items:[
{
title:'パネル',
html:'<div style="text-align:center;padding:100px;"><h1>Fit レイアウト</h1></div>',
collapsible:true
}
]
});
});

タイトルのある普通のHTMLに見えますが、よく見ると上下左右に青い枠があります。これがViewportで支配されている証拠です。ここでViewportの中に配置しているパネルはただHTMLを表示するだけの単純なパネルです。グリッドやタブなども配置することがもちろんできます。グリッドやタブパネルはExt.Panelのサブクラスとして定義されています。Ext JSではこのパネルを組み合わせたり拡張したりしながらアプリケーションを構築していきます。
ここではさらにパネルのコンフィグにcollapsible（折りたたみ設定）を追加しています。タイトル右上の三角印をクリックすると、Viewportの中のパネルを折りたたむことができるようになります。このコンフィグオプションは比較的よく使います。gridなどで他のパネルをたたんで表を広く表示したいときなどに有効です。

2-2.borderレイアウト

Viewportにborderレイアウトを設定して、上下左右に区切られたパネルを作ります。

ボーダーレイアウトのViewport

borderレイアウトではitemsに設定するパネルコンフィグでregionという項目を設定しなければ行けません。regionは画面の上下左右のどの位置に配置するかを指定します。borderレイアウトでのregionの設定値は下の図のようになっています。

ボーダーレイアウトの配置

真ん中の”center”のパネルは必須になります。子要素となる5つのパネルを作って、ボーダーレイアウトのそれぞれの位置に配置します。


Ext.onReady(function(){
new Ext.Viewport({
layout:'border',
items:[
new Ext.Panel({
title:'CENTER',
html:'CENTER PANEL',
width:'100px',
region:'center'
}),
new Ext.Panel({
title:'NORTH',
html:'NORTH PANEL',
margins:'0 3 0 3',
region:'north',
split:true
}),
new Ext.Panel({
title:'SOUTH',
html:'SOUTH PANEL',
margins:'3 3 3 3',
region:'south',
collapsible:true
}),
new Ext.Panel({
title:'EAST',
html:'EAST PANEL',
margins:'0 3 0 3',
region:'east',
collapsible:true
}),
new Ext.Panel({
title:'WEST',
html:'WEST PANEL',
margins:'0 0 0 3',
region:'west',
split:true
}),
]
});
});

eastとsouthのパネルにはcollapsibleの設定も行っています。ボタンのデザインが違っていますが、右上の「>>」を押すとパネルがfitのときと同じようにアニメーション付きでたたまれます。

もう一つよく使うボーダー内のパネルに設定するコンフィグオプションにsplitがあります。splitを指定すると境界線をドラッグして大きさを変更することができます。splitを設定した場合は、ドラッグできるボーダーのマージンが自動的に+2pxされます。そのため他のボーダーよりを太くなって少し不恰好に見える場合もあります。その場合はmarginsコンフィグで対象のボーダーのマージンに-2pxすることで、ボーダーの太さを調整します。

またlayout自体はViewportだけでなくパネルにも設定することができます。そのため各regionをさらに細かくborderレイアウトで分けることもできます。


Ext.onReady(function(){
new Ext.Viewport({
layout:'border',
items:[
new Ext.Panel({
title:'CENTER',
width:'100px',
region:'center',
layout:'border',
items:[
{
title:'Child Center',
html:'Child Center',
margins:'0 0 0 0',
region:'center'
},
{
title:'Child North',
html:'Child North',
margins:'3 3 3 3',
region:'north'
},
{
title:'Child South',
html:'Child South',
margins:'3 3 3 3',
region:'south'
},
{
title:'Child East',
html:'Child East',
margins:'0 3 0 3',
region:'east'
},
{
title:'Child South',
html:'Child West',
margins:'0 3 0 3',
region:'west'
}
]
}),
new Ext.Panel({
title:'NORTH',
html:'NORTH PANEL',
margins:'0 3 0 3',
region:'north',
split:true
}),
new Ext.Panel({
title:'SOUTH',
html:'SOUTH PANEL',
margins:'3 3 3 3',
region:'south',
collapsible:true
}),
new Ext.Panel({
title:'EAST',
html:'EAST PANEL',
margins:'0 3 0 3',
region:'east',
collapsible:true
}),
new Ext.Panel({
title:'WEST',
html:'WEST PANEL',
margins:'0 0 0 3',
region:'west',
split:true
})
]
});
});

ボーダーレイアウト２

このようにパネル内をさらに分けて様々なレイアウトを作ることができます。

こちらもどうぞ

佐竹裕行

1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。

Written by 佐竹裕行

10 月 21st, 2009 at 12:30 pm

Posted in ExtJSチュートリアルｓｕｓ４版, ExtJS勉強会＠名古屋資料

Tagged with ExtJS, チュートリアル, 勉強会

3 Responses to 'Ext JS入門3　Viewportを使う'

Subscribe to comments with RSS or TrackBack to 'Ext JS入門3　Viewportを使う'.

[...] [...]

Ext Japan - ブログ

12 11 月 09 at 11:28 AM
[...] [...]

10月28日（水）に第2回ExtJS勉強会を名古屋で開催しました | ExtJSで楽しくRIA業務アプリ開発

12 11 月 09 at 12:01 PM
[...] [...]

第3回ExtJS勉強会

27 11 月 09 at 3:50 PM

月	火	水	木	金	土	日
				11 月 »
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

ExtJSで楽しくRIA業務アプリ開発