先贴出官方文档的关于此布局的描述：“

一个专门的容器用于可视应用领域（浏览器窗口）.

Viewport渲染自身到网页的documet body区域， 并自动将自己调整到适合浏览器窗口的大小，在窗口大小发生改变时自动适应大小。 一个页面中只能创建一个Viewport。

任何的容器都可以作为一个Viewport 的子组件，开发者使用一个Viewport作为父容器配置布局， 并管理他们的大小和位置.

Viewports一般使用布局, 如果开发者需要的布局很简单,可以指定一个简单布局。

例如, 只是简单的把单个子项，填补整个父容器的空间, 只要使用 布局.

几个子项在一个父容器中，要显示全尺寸显示其中一个“激活”的子项,使用 布局.

所有的内部布局可以通过 添加到Viewport,或者通过配置,或者通过添加  方法添加panels，这些子组件本身可能就存在自身的布局方式.

The Viewport本身不提供滚动条,所以如果内部的子面板要实现滚动条， 需要配置属性.

”

下面演示官方给出的示例：

Ext.create('Ext.container.Viewport', {    layout: 'border',    items: [{        region: 'north',        html: '
Page Title
',        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所处方位。

 

运行效果