先贴出官方文档的关于此布局的描述：“
一个专门的容器用于可视应用领域（浏览器窗口）.
Viewport渲染自身到网页的documet body区域， 并自动将自己调整到适合浏览器窗口的大小，在窗口大小发生改变时自动适应大小。 一个页面中只能创建一个Viewport。
任何的Container容器都可以作为一个Viewport 的子组件，开发者使用一个Viewport作为父容器配置布局layout， 并管理他们的大小和位置.
Viewports一般使用border layout布局, 如果开发者需要的布局很简单,可以指定一个简单布局。
例如, 只是简单的把单个子项，填补整个父容器的空间, 只要使用 fit layout布局.
几个子项在一个父容器中，要显示全尺寸显示其中一个“激活”的子项,使用 card layout布局.
所有的内部布局可以通过Panel 添加到Viewport,或者通过配置items,或者通过添加 add 方法添加panels，这些子组件本身可能就存在自身的布局方式.
The Viewport本身不提供滚动条,所以如果内部的子面板要实现滚动条， 需要配置autoScroll属性.
”
下面演示官方给出的示例：
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
这里需要说明几点：
1.由于ViewportView是自动填充整个页面的布局方式，因此设置height（高度）无效；
2.itmes：上面的示例没有指定子组件的xtype，那么子组件的xtype是什么呢？API上给出了答案：
原来默认添加的子组件是panel。
3.region：此属性定义了子组件的方位。如Ext.panel.Panel的api所示：
可以看出此属性用于在border布局中指定panel所处方位。
运行效果