如何在ExtJS中点击删除按钮移除活动标签页？

不用手动给标签页分配ID或写循环，ExtJS的Ext.tab.Panel自带的API就能轻松实现需求，具体修改如下：

修改删除按钮的点击事件 #

直接在del按钮的handler中添加以下逻辑：

handler: function(){
    // 获取当前激活的标签页
    var activeTab = tabs.getActiveTab();
    // 确认存在活动标签页再执行移除
    if (activeTab) {
        // 移除该标签页
        tabs.remove(activeTab);
        // 可选：移除后自动激活第一个标签页（如果还有剩余标签）
        if (tabs.items.length > 0) {
            tabs.setActiveTab(0);
        }
    }
},

完整代码示例 #

var tabs = Ext.create('Ext.tab.Panel',{
    items: [{
        title:'tab1',
        html:'text to tab1'
    },{
        title:'tab2',
        html:'text to tab2'
    }],
    renderTo: Ext.getBody()
});

Ext.create('Ext.button.Button',{
    text:'add',
    style:{backgroundColor: 'green'},
    handler: function(){
        var tab = tabs.add({
            title: 'tab' +  (tabs.items.length + 1),
            html: 'new tab ' + (tabs.items.length + 1)
        });
        tabs.setActiveTab(tab);
    },
    renderTo:Ext.getBody()
});

Ext.create('Ext.button.Button', {
    text:'del',
    style:{backgroundColor:'red'},
    handler: function(){
        var activeTab = tabs.getActiveTab();
        if (activeTab) {
            tabs.remove(activeTab);
            if (tabs.items.length > 0) {
                tabs.setActiveTab(0);
            }
        }
    },
    renderTo: Ext.getBody(),
})

逻辑说明 #

• tabs.getActiveTab()：直接获取当前处于激活状态的标签页组件实例，无需手动管理ID或遍历查找
• tabs.remove(activeTab)：接收组件实例作为参数，直接移除对应的标签页，ExtJS会自动处理组件的销毁和界面更新
• 额外的判断逻辑是为了避免删除最后一个标签页后出现无标签的情况，可根据实际需求调整

内容的提问来源于stack exchange，提问作者RobinBobin