Problem removing tabs from a tabpanel (ExtJS 6)

[jvandemerwe]

I have the following problem:

I have an application where I have a huge problem closing tabs from a tabpanel. I have a fiddle prepared where the same problem happens.

I have 2 tabs. The first one is disabled (as it is in my application too) and the second one is closable, with in this sample just a button, to close the panel. You can also close it with the 'x' on top, but the button is the vital part of the problem.

When I click the button all the tabs disappear. When I click the 'x', it works fine.

What I am doing wrong here? One remark: I haven't "ownerCt" in my application, but for this sample it is ok, I guess.

After clicking the button I get the following error in my console:

SH_014924.jpg

The result what I am after is, that after closing the button, the first (disabled) tabpanel is shown (but still disabled).

[hakimio]

Looks like ExtJS bug.
Also, it works if you remove "bodyPadding" on the second tab and use "margin" instead.

[jvandemerwe]

Looks like ExtJS bug.
Also, it works if you remove "bodyPadding" on the second tab and use "margin" instead.

When I do that, the P1 tab stays, but it's content doesn't show.

[alex.volfson]

I can't reproduce your issue. Did you change something? Also, can you clarify which button you are referring to in this statement :"When I click the button all the tabs disappear...."?

[hakimio]

I can't reproduce your issue. Did you change something? Also, can you clarify which button you are referring to in this statement :"When I click the button all the tabs disappear...."?

The one labeled "Close me".
And he commented out "panel.setActiveTab(0);". That's why the error doesn't show up, but the contents of the first tab still disappear.

[jvandemerwe]

What I have done is an override on the "Ext.tab.Panel" and added a function called: "closeActiveTab". This function doesn't close the panel, but instead does the close on the tab button. Doing this, it will fire all the events like you have clicked on the cross on the button itself.

Ext.define('Ext.overrides.tab.Panel', {
    override: 'Ext.tab.Panel', 
    /**
     * function to close the panel, by executing
     * the close on the tab button, rather than the panel
     * itself (bug Ext JS 6.0.2/3)
     * It closes the active tab.
     */
    closeActiveTab: function () {
        var tabBar = this.getTabBar();
        var activeTab = this.getActiveTab();
        var idx = this.items.findIndex('id', activeTab.id);
        var button = tabBar.items.getAt(idx);
        tabBar.closeTab(button);
    }
});

I use it like this:

tabPanel.add({
   extend: 'Ext.form.Panel',
   ...
   listeners: {
       scope: me,
       beforedestroy: function () {
           tabPanel.setActiveTab(0);
       },
       PatientSaved: function (panel, records, key) {
           tabPanel.closeActiveTab();
           // do some more
       },
       closePatientMaintPanel: function (panel) {
           tabPanel.closeActiveTab();
       }
   }
   ...
});

!!! Important: without the beforedestroy listener on the added tab it doesn't work either. So it should not be forgotten.

[hakimio]

If you manually switch tabs from the disabled one to the enabled and then click on the tab's close button, the contents of the disabled tab still disappear. So, I am not sure if your override helps a lot... It doesn't fix the disappearing disabled tab contents bug.

[jvandemerwe]

@hakimio,

If you manually switch tabs from the disabled one to the enabled and then click on the tab's close button, the contents of the disabled tab still disappear. So, I am not sure if your override helps a lot... It doesn't fix the disappearing disabled tab contents bug.

You're right, I have updated the fiddle. I have extended it a bit to reassemble more my real application situation.

What I was forgotten that it is essential to have "beforedestroy" listener on the added tab.

The "beforedestroy" listener is doing an setActiveTab(0) on the first (not enabled) tab.

In fact nothing happens, but it prevents apparently that in the "closeTab" function in the class Ext.tab.Bar is running into nowhere on executing the me.setActiveTab(toActivate).

This is possibly because the toActivate variable in that function still has the value of the tab to be closed (don't know why), because there is no enabled panel left, so it shouldn't find any result (false or undefined maybe?).

line: 230926 of ext-all-debug.js: toActivate = me.findNextActivatable(toClose);

[jvandemerwe]

I can't reproduce your issue. Did you change something? Also, can you clarify which button you are referring to in this statement :"When I click the button all the tabs disappear...."?

I have just updated the fiddle, but I still have the one with problem.

Important in this fiddle is the beforedestroy event. In the fiddle is commented out. In that case clicking the 'x' in the tab of the added tab goes wrong.

When you uncomment this events function line, the click on the 'x' in the tab does it right. But the "close me" button in the panel removes about everything.



The fiddle that does it correct is: