Ext.tab.Panel頁籤

<div class="box">

    <div id="myItemsPanel" class="w_320">
        <h2>使用items添加標籤頁</h2>
    </div>
    <div id="myPanelAdd" class="w_320">
        <h2>動態添加標籤頁</h2>
    </div>
    
</div>

Ext.onReady(function(){
    
    //Ext.tab.Panel頁籤
    //同一時刻只有一個處於活動狀態
    
    //1. 經過items添加標籤頁
    //超過頁寬時自動出現標籤頁滾動按鈕
    Ext.create('Ext.tab.Panel',{
        title : 'Ext.tab.Panel示例',
        width : 300,
        height : 150,
        frame : true,
        renderTo : 'myItemsPanel',
        activeTab : 0,//默認激活第一個tab頁
        items : [
            {title : 'tab標籤頁1', html : 'tab標籤頁1內容'},
            {title : 'tab標籤頁2', html : 'tab標籤頁2內容'},
            {title : 'tab標籤頁3', html : 'tab標籤頁3內容'},
            {title : 'tab標籤頁4', html : 'tab標籤頁4內容'},
            {title : 'tab標籤頁5', html : 'tab標籤頁5內容'}
        ]
    });
    
    //2. 動態添加標籤頁
    var tabPanel = Ext.create('Ext.tab.Panel',{
        title : 'Ext.tab.Panel示例(動態添加tab頁)',
        width : 300,
        height : 150,
        frame : true,
        renderTo : 'myPanelAdd',
        activeTab : 0, //默認激活第一個tab頁
        items : [{
            title : 'tab標籤頁1', 
            html : 'tab標籤頁1內容'
        }],
        buttons : [{
            text : '添加標籤頁',
            handler : addTabPage
        }]
        
    });
    //addTabPage回調函數
    function addTabPage(){
        var index = tabPanel.items.length + 1;
        var tabPage = tabPanel.add({
            title : 'tab標籤頁'+index,
            closable : true,//容許關閉
            html : 'tab標籤頁'+index+"內容"
        });
        tabPanel.setActiveTab(tabPage);//設置當前tab頁
    }
});