ExtJS 4 Ext.tab.Panel

Posted 2020-08-20

 

Ext.onReady(function () {
    Ext.create(‘Ext.tab.Panel‘, {
        title: ‘Ext.tab.Panel 示例‘,
        frame: true,
        height: 150,
        width: 300,
        activeTab: 1,
        renderTo: ‘content‘,
        items: [
            { title: ‘1‘, html: ‘1‘ },
            { title: ‘2‘, html: ‘2‘ },
            { title: ‘3‘, html: ‘3‘ }
        ]
    });

});

 

 

Ext.onReady(function () {
    var tabPanel= Ext.create(‘Ext.tab.Panel‘, {
        title: ‘Ext.tab.Panel 示例‘,
        frame: true,
        height: 150,
        width: 300,
        activeTab: 1,
        renderTo: ‘content‘,
        items: [
            { title: ‘1‘, html: ‘1‘ },
            { title: ‘2‘, html: ‘2‘ },
            { title: ‘3‘, html: ‘3‘ }
        ],
        buttons: [{
            text: ‘添加‘,
            handler:addTabPage
        }]
    });

    function addTabPage() {
        var index = tabPanel.items.length + 1;
        var tabPage = tabPanel.add({
            title: index,
            html: index,
            closable:true
        });
        tabPanel.setActiveTab(tabPage);
    }

});