Viewport一個表示程序可視區域的特殊容器（瀏覽器可視區域）。
視窗渲染在document的body標籤上，並且根據瀏覽器可視區域的大小自動調整並且管理窗口的大小變化。一個頁面上只允許存在一個viewport。所有的{@link Ext.Panel 面板}增加到viewport，通過她的items，或者通過她的子面板（子面板也都可以擁有自己的layout）的items，子面板的add方法，這種設計讓內部佈局的優勢非常明顯。
Viewport不支持滾動，所以如果子面板需要滾動支持可以使用autoScroll配置。
下面展示一個很經典的border佈局的Viewport程序示例。
效果截圖 ：
下面我們就來顯示這樣的一個效果：
viewport.js
Ext.onReady(function() {
// Viewport會自動渲染到body上
new Ext.Viewport({
layout : "border",
items : [ {
region : "north",
title : "頂部工具欄",
height : 100
}, {
region : "west",
title : "菜單",
width : 100
}, {
region : "center",
title : "主區域"
} ]
});
// 創建一個Viewport
new Ext.Viewport({
// 指定viewport的佈局方式
layout: 'border',
items: [{
// 指定佈局到北邊
region: 'north',
html: '<h1 class="x-panel-header">頁面標題欄</h1>',
// autoHeight:true的設定表示會依照元素內容自適應大小，Ext就不會過問高度的問題。
autoHeight: true,
// border: false的設定表示不要邊框
border: false,
// 表示上、右、下、左的間距，也就是順時針的間距
margins: '0 0 5 0'
}, {
// 表示渲染到左邊（西邊）
region: 'west',
// 指定可以收縮展開
collapsible: true,
// 標題
title: '左側菜單欄',
// 指定組件的類型是TreePanel
xtype: 'treepanel',
// 寬度是200
width: 200,
// autoScroll: true的設定表示自動根據其中的內容要不要產生滾動條
autoScroll: true,
// split: true的設定表示該組件在與其他的組件中間間隔課拉拽
split: true,
// 樹加載器
loader: new Ext.tree.TreeLoader(),
// 創建樹的根節點
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: '菜單選項一',
leaf: true
}, {
text: '菜單選項二',
leaf: true
}, {
text: '菜單選項三',
leaf: true
}]
}),
// rootVisible: false 的設定表示不顯示樹根節點，這是不可以收縮和展開的
rootVisible: false,
// 設定事件監聽器
listeners: {
// 處理單擊事件
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', '你單擊了: "' + n.attributes.text + '"');
}
}
}, {
// 在中間放置一個tabpanel
region: 'center',
xtype: 'tabpanel',
activeTab : 0,
items: {
title: '選項面板一',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
// 在底部（南面）放置一面板（沒有指定xtype則默認是panel）
region: 'south',
title: '簡介信息',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}]
});
});viewprt.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext-viewport示例</title>
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<script type="text/javascript" src="viewport.js"></script>
</head>
<body>
</body>
</html>