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

 

運行效果