CODEWITHSUNDEEP
extjs
Devang
Devang

Reputation: 454

How to remove active tab from Tab in Ext js?

I want to remove the active tab from sencha ext. Assume that am into controller file of the view.

Note: I have used remove() as well as destroy().

destroy() function works fine but tab header is not getting removed.

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

Before Clicking on Cancel button: enter image description here

After Clicking on Cancel button enter image description here

Upvotes: 0

Views: 651

Answers (3)

Dinkheller
Dinkheller

Reputation: 5054

I enhanced the answer from Matheus to meet the requirement a bit more:

  • not destroying the entire tab, but only the content
  • setting the button handler without the use of getController (please try not to use this, as it is considered bad practice by Sencha)
  • removed the outer panel which only added a title

Fiddle

Upvotes: 1

Dawesi
Dawesi

Reputation: 586

You can also remove it using the tab bar using closeTab() which pretty much just runs a tabs.remove(tabRefOrObj);

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

Upvotes: 0

Matheus Hatje
Matheus Hatje

Reputation: 987

You should destroy the active tab in your tabpanel, eg:

Controller

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

View

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

Upvotes: 1

Related Questions