Tab close, doesn't show previous tabs

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Tab close, doesn't show previous tabs

    Hi All, or Fabricio,

    We have a tab panel to which a user could add up to six or so tabs. In EXT 2.5.3, the previously viewed tab would automatically be displayed when a user closes a tab.

    In EXT 5, when a user closes a tab, if it was a tab opened earlier, any tab opened later will be viewable. But if it was a tab opened later, when you close it, any earlier tabs cannot be seen. The tab itself is visible, but the content is not seen. I believe, by viewing the Dev tools, that the content is still loaded in the browser, but the ext code is not making it visible.

    Again, open tab 1, then open tab 2. Go back to tab 1, then close it, tab 2 is visible in all its glory.
    Open tab 1, then open tab 2, then close tab 2, tab 1 TAB is visible, but content is not visible.

    How the tab panel is declared:
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server"/>
    
        <ext:Viewport runat="server" Border="false" Layout="Fit">
            <Items>
                <ext:TabPanel ID="mainTabPanel" Border="false" runat="server" >
                    
                </ext:TabPanel>
            </Items>
            <Bin>
    
            </Bin>
        </ext:Viewport>
    </body>
    How we add tabs (name and such are coming from a dataabase):

    <script type="text/javascript">
                var addTab = function (id, url, menuItem, title) {
                    console.log('url: ' + url);
                    var mainTabPanel = window.Ext.getCmp("mainTabPanel");
                    var tabitem = mainTabPanel.getComponent(id);
    
                    if (!tabitem) {
                        var tab = mainTabPanel.insert(mainTabPanel.items.length + 1, {
                            id: id,
                            title: title,
                            closable: true, border: false,
                            menuItem: menuItem,
                            loader: {
                                url: url,
                                renderer: "frame",
                                loadMask: {
                                    showMask: true,
                                    msg: "Loading"
                                }
                            }
                        });
                    }
    
                    mainTabPanel.setActiveTab(tab);
                }
        </script>
    Appreciate your help!
  2. #2
    Hello Bob!

    I have tried to put together a sample given your description, using the shell code you provided and script you provided, and it works just right.

    Scenario 1
    1. Open tab 1 (made a button to call that client-side method you provided)
    1.1. tab 1 opens with its contents shown.
    2. Open tab 2 (made another button to call that method)
    2.1. tab 2 opens, contents shown.
    3. Click the tab 1 to switch back to it
    3.1. tab 1 contents are displayed. the tab's handle is highlighted, to indicate it is the active tab.
    4. Click the tab 1 "close" little button at top-right of the tab handle
    4.1. tab 1 is dismissed, handle erased from tab panel;
    4.2. tab 2 is selected, handle highlighted and contents shown.

    So far I think it agrees with your description. Right?

    Scenario 2
    1. Open tab 1 (via that button)
    1.1. tab 1 is displayed, contents included.
    2. Open tab 2 (via that other button)
    2.2. tab 2 displayed. Glory and all.
    3. Close tab 2.
    3.1. tab 2 is dismissed, handle erased from tab panel;
    3.2. tab 1 is selected, handle highlighted and contents shown.

    This is where I believe our scenarios diverge. I can't see the problem you described. Maybe you should try drawing an actual example with fake data to let us reproduce the scenario.

    Overall, by your description and code, all looks right, I have no clue how have you reproduced the behavior you described.

    Quote Originally Posted by rgraham
    tab 1 TAB is visible, but content is not visible.
    Do I understand this? tab 1's handle is highlighted to indicate the tab is the active one, but the contents therein are but blank? I can't reproduce this, nevertheless. There must be something else missing. Please try to make a standalone example with the scenario you described. I'm sure you'd need to add something else in order to reproduce the behavior you described.

    Looking forward to your follow-up.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,

    No, the initial tab does not have the "selected" appearance (See magnified screen grab).

    I tried writing a script in the beforeClose event handler to set the previous tab to be the active tab. I could see that this worked as I stepped through the code, and I could see that this worked as I stepped through the code in the debugger (I could see the first tab clearly, though dimmed slightly by the browser due to being in debugging mode).

    However, when I let the page's events continue on after the beforeClose event, the tab's contents became hidden again, and the tab's appearance was as in the screenshot. (There doesn't seem to be a way to delete the first attachment I uploaded???)

    Click image for larger version. 

Name:	Appearance of initial tab after close second.png 
Views:	107 
Size:	91.7 KB 
ID:	25335

    Thanks, Bob Graham
    Last edited by rgraham; May 12, 2020 at 5:46 PM.
  4. #4
    Hello Bob!

    Sorry, even with the screenshot I am not sure I understand how to reproduce this issue.

    The dashed box around the tab name means a "focus" visual feedback some themes feature. You say the tab is getting the focus but it is not being effectively selected, right? I am honestly out of ideas; if you change the theme to "triton" do you get any hint on what's going on?

    If you can wrap that behavior in a test case, please let us know; if we can reproduce the behavior we will be able to tell you exactly why it happens and how to properly overcome the issue. I tried making a simple test case here, but it simply works.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Just a little follow-up for your last post, Bob.

    About your misuploaded file, the file should be deleted in one hour after it is uploaded if it is not posted/referenced in any post. So by now it should have been deleted already.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hi Fabricio,

    Actually, the screenshot shows that the tab text is highlighted, but the tab itself is not in the "selected" state as the line below the tab should be "open" below that tab, instead it is a solid line.

    I doubt that I could reproduce this in a simple sample, it is always my hope that the knowledge of the support personnel might include experience with a particular glitch. But I fully realize this may not always be the case.

    AS far as using a workaround, I can make the tab and it's contents display properly by putting code to select it in the beforeClose event of the closing tab, but once I get past that line in debugging, it goes back into hiding. Some event after the beforeClose handler is causing the tab's selected state to go away and the content to be hidden. Curious that this only happens when closing a later tab and expecting an earlier tab to be shown.

    I did find the way to eliminate the unwanted upload btw, it is done with a little delete "X" in the upper corner of the attachment list!

Similar Threads

  1. Replies: 1
    Last Post: May 24, 2018, 3:49 AM
  2. [CLOSED] Help required - Add Tab and Close Tab design architecture
    By mohan.bizbites in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 20, 2013, 3:42 AM
  3. How to close all tabs in TabPanel
    By ozayExt in forum 1.x Help
    Replies: 3
    Last Post: Apr 27, 2012, 11:48 AM
  4. Replies: 9
    Last Post: Nov 15, 2011, 2:37 PM
  5. Modify Tab/Close Tab & Close Other Tab
    By Smary in forum 1.x Help
    Replies: 7
    Last Post: Nov 05, 2010, 3:11 AM

Posting Permissions