Extjs4.2布局——Ext.container.ViewportView

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

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

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所处方位。

运行效果