ExtJS 之 Ext.Viewport
使用 ExtJS 3 語法[b]BorderLayout 邊框佈局[/b]
在 IE8 的畫面
在 Firefox4 的畫面
在 Chrome 的畫面
檔案 index.html 的內容[code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS 3 : Viewport</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
</script>
<script type="text/javascript" src="vp.js"></script>
</head>
<body>
</body>
</html>
[/code]檔案 vp.js 的內容[code]
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
id: 'north-panel',
region: 'north',
html: '北'
},{
id: 'south-panel',
region: 'south',
html: '南'
}, {
id: 'west-panel',
region: 'west',
html: '西',
width: 100
}, {
id: 'east-panel',
region: 'east',
html: '東',
width: 100
}, {
id: 'center-panel',
region: 'center',
html: '中'
}]
});
});[/code]使用 BorderLayout 後整個佈局區域區分了東、西、南、北、中共五個部分，而其中的中間區域為必要之外，其他的區域都可以省略不用。而在 west 與 esat 設定寬度(width)是因為在 IE 不會顯示，需要設定寬度才會看到。
頁:
[1]