通过单击按钮将选项卡(项目）添加到选项卡面板，扩展

Add a tab(item) to tabpanel by button clicking, extjs

本文关键字：选项 添加 扩展 单击 按钮 项目      更新时间：2023-09-26

我有一个选项卡面板，最初有 1 个选项卡和一个按钮。但是用户应该能够通过单击按钮添加更多选项卡。这是到目前为止的代码：

var tabPan = Ext.create('Ext.TabPanel', {
listeners: {
    beforetabchange: function(tabs, newTab, oldTab, eOpts) {
        if (newTab.title=='Add') { // Or some other condition
            return false; 
        }
    }
},
items:[
{
  title: 'Default Tab',
  html: innerHtml  
},
{
  xtype: 'button',
  title : 'Add',
},
]
})

您的方法是正确的，您所需要的只是创建一个面板并将其添加到 TabPanel 中。 

   var i = 1;
    var onAddTab = function(tabPanel) {
        var newTab = {
            xtype: 'panel',
            title: 'Untitled Tab ' + (i++)
        };
        var index = tabPanel.items.length - 1;
        var newTabItem = tabPanel.insert(index, newTab);
        tabPanel.setActiveTab(newTabItem);
    };
    var tabPanel = Ext.create('Ext.TabPanel', {
        listeners: {
            beforetabchange: function(tabs, newTab, oldTab, eOpts) {
                if (newTab.title == 'Add') {
                    onAddTab(tabPanel);
                    return false;
                }
            }
        },
        items: [{
            title: 'Default Tab',
            html: 'Hello World'
        }, {
            xtype: 'button',
            title: 'Add',
        }],
        renderTo: Ext.getBody()
    });
相关文章：