Results 1 to 9 of 9

Thread: Problem removing tabs from a tabpanel (ExtJS 6)

  1. #1
    Sencha Premium User
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    253
    Answers
    7

    Default Problem removing tabs from a tabpanel (ExtJS 6)

    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).


  2. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    908
    Answers
    105

    Default

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

  3. #3
    Sencha Premium User
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    253
    Answers
    7

    Default

    Quote Originally Posted by hakimio View Post
    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.

  4. #4
    Sencha User
    Join Date
    Jan 2016
    Posts
    462
    Answers
    60

    Default

    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...."?

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    908
    Answers
    105

    Default

    Quote Originally Posted by alex.volfson View Post
    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.

  6. #6
    Sencha Premium User
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    253
    Answers
    7

    Default Well, I have a solution that works

    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.

    Code:
    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:

    Code:
    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.

  7. #7
    Sencha User
    Join Date
    Apr 2013
    Posts
    908
    Answers
    105

    Default

    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.

  8. #8
    Sencha Premium User
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    253
    Answers
    7

    Default

    @hakimio,

    Quote Originally Posted by hakimio View Post
    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);


  9. #9
    Sencha Premium User
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    253
    Answers
    7

    Default

    Quote Originally Posted by alex.volfson View Post
    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:


Similar Threads

  1. Adding and removing tabs from a tabpanel -- tabs won't display
    By illuminum in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 19 Jun 2013, 10:10 PM
  2. TabPanel hiding and removing tabs
    By novahokie in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 8 Jan 2010, 8:32 AM
  3. HOW TO: Hide one or more tabs in a TabPanel rather than removing them?
    By wgpubs in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 25 Aug 2009, 10:20 AM
  4. TabPanel - removing all tabs, new tabs don't display properly
    By cmizelle in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 1 May 2008, 7:32 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •