如何从 Ext js 中的选项卡中删除活动选项卡？答案

【问题标题】：How to remove active tab from Tab in Ext js?如何从 Ext js 中的选项卡中删除活动选项卡？
【发布时间】：2019-12-02 11:09:29
【问题描述】：

我想从 sencha ext 中删除活动选项卡。假设 am 进入视图的控制器文件。

注意：我使用了 remove() 和 destroy()。

destroy() 函数工作正常，但标签页眉没有被删除。

coseResultTab() {
  this.getView().destroy();
}

在单击取消按钮之前：

点击取消按钮后

【问题讨论】：

标签： extjs

【解决方案1】：

您应该销毁标签面板中的活动标签，例如：

控制器

Ext.define('MyViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.myview',
    destroyTab: function() {
        this.getView().down('tabpanel').getActiveTab().destroy();
    }
});

查看

Ext.create('Ext.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    title: 'Panel',
    id: 'myPanel',
    controller: 'myview',
    items: [{
        xtype: 'tabpanel',
        items: [{
            title: 'Foo',
            items: [{
                xtype: 'button',
                text: 'Destroy!',
                handler(btn) {
                    Ext.getCmp('myPanel').getController().destroyTab();
                }
            }]
        }, {
            title: 'Bar',
            items: [{
                    xtype: 'button',
                    text: 'Destroy!',
                    handler(btn) {
                       Ext.getCmp('myPanel').getController().destroyTab();
                    }
                }]
        }]
    }]
});

Fiddle

【讨论】：

【解决方案2】：

我增强了 Matheus 的答案以进一步满足要求：

不破坏整个标签，而只破坏内容
在不使用 getController 的情况下设置按钮处理程序（请尽量不要使用它，因为 Sencha 认为这是不好的做法）
移除了仅添加标题的外部面板

Fiddle

【讨论】：

【解决方案3】：

您也可以使用 closeTab() 使用标签栏删除它，它几乎只是运行 tabs.remove(tabRefOrObj);

https://docs.sencha.com/extjs/6.5.3/modern/Ext.tab.Bar.html#method-closeTab

【讨论】：