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

 

運行效果