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页
    }
});