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

Posted 2023-02-26

技术标签:

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

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

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

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

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

在单击取消按钮之前：

点击取消按钮后

【问题讨论】：

【参考方案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

【讨论】：

以上是关于如何从 Ext js 中的选项卡中删除活动选项卡？的主要内容，如果未能解决你的问题，请参考以下文章