Viewport

    ViewPort是一个特殊的容器代表整个浏览器显示界面。ViewPort默认显示在ducument.body中，能够随着浏览器大小变化自动重定大小和定位。就像其他的容器，如果你为它配置了一个布局管理器(Layout),viewport能够对其子组件进行重定位、设定相关大小。

    通常ViewPort使用的布局管理器是border layout, 你可以根据自己的需要重新设定布局管理器。例如，你可以设置为fit布局，也可以使用card布局。

    Inner layouts are available by virtue of the fact that all Panels added to the Viewport, either through itsitems, or through the items, or the add method of any of its child Panels may themselves have a layout.

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
        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'
        }
    }]
});