今回はViewportを作成してみます。
まずはHTMLファイル
viewport.htmlのソース
viewport.jsのソース
今回は BorderLayout を使用してみます。
3行目の様に layout: 'border' を定義します。
BorderLayout の場合、子要素を center、north、west、east、south の5箇所に配置します。
4行目以降の items の中の region で配置場所を定義しています。
真ん中に配置される center は必須です。
今回 center には TabPanel を配置しました。
west には collapsible、east には split を定義しています。
TabPanelについては別の機会にｗ
まずはHTMLファイル
viewport.htmlのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-Type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<title>Viewport</title>
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />
<script type="text/javascript" src="./adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext-all.js"></script>
<script type="text/javascript" src="./viewport.js"></script>
</head>
<body>
</body>
</html>
viewport.jsのソース
Ext.onReady( function() {
new Ext.Viewport({
layout: 'border',
items: [{
title: 'north',
id: 'header',
height: 100,
region: 'north'
},{
title: 'west',
id: 'west',
width: 150,
region: 'west',
collapsible: true
},{
title: 'center',
id: 'center',
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'Default Tab',
html: 'The first tab\'s content.'
},
{
title: 'Second Tab',
html: 'The second tab\'s content.'
}
]
},{
title: 'east',
id: 'east',
width: 100,
region: 'east',
split: true
},{
title: 'south',
id: 'south',
height: 100,
region: 'south'
}],
renderTo: Ext.getBody()
});
});
今回は BorderLayout を使用してみます。
3行目の様に layout: 'border' を定義します。
BorderLayout の場合、子要素を center、north、west、east、south の5箇所に配置します。
4行目以降の items の中の region で配置場所を定義しています。
真ん中に配置される center は必須です。
今回 center には TabPanel を配置しました。
west には collapsible、east には split を定義しています。
TabPanelについては別の機会にｗ
コメント
コメントを投稿
・コメントはお気軽にどうぞ。
・記事に関係のないコメントはご遠慮ください。
・<b>, <i>, <a> などの一部の HTML タグを使用できます。