extjs - Ext.TabPanel 簡介

Ext.TabPanel中文名稱我也不知道稱為啥?不過感覺Tab應該是指標籤的意思，用於將panel分成幾個群組。
Ext.TabPanel算是個基本的container，所以可以將您想顯示的東西放入items中，就可以顯示了。
最基本的TabPanel如下：

Ext.onReady(function() {
    var tp = new Ext.TabPanel({
        renderTo: Ext.getBody(),
        // activeTab: 1,
        width:300,
        height: 200,
        items: [
            {title: 'p1', html: 'content 1'},
            {title: 'p2', html: 'content 2'}
        ]
    });
});

activeTab指出在初始化的時候顯示的頁面，預設是不顯示任何頁面的。

剛剛提到, TabPanel算是container，所以也可以放置其他元件。

Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
        title: 'p2',
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'name'
        }],
        buttons: [{
            text: 'send'
        }]
    });
    var tp = new Ext.TabPanel({
        renderTo: Ext.getBody(),
        activeTab: 1,
        width:300,
        height: 200,
        items: [
            {title: 'p1', html: 'content 1'},
            form // 在第二個頁面放置一個表單元件.
        ]
    });
});

也可以使用autoLoad載入URL(使用Ext.Updater.update Object)，當成頁面的內容，如果有script要執行的話，必需將scripts設為true。

Ext.onReady(function() {
    var tp = new Ext.TabPanel({
        renderTo: Ext.getBody(),
        activeTab: 1,
        width:300,
        height: 200,
        items: [
            {title: 'p1', html: 'content 1'},
            {title: 'p2', autoLoad: {url: 'tab.html', scripts: true}}
        ]
    });
});