Tab close, doesn't show previous tabs

**rgraham** · May 12, 2020, 12:39 AM

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!

**fabricio.murta** · May 12, 2020, 2:50 AM

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.

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.

**rgraham** · May 12, 2020, 4:10 PM

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: 106
Size: 91.7 KB
ID: 25335

Thanks, Bob Graham

**fabricio.murta** · May 13, 2020, 1:02 AM

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.

**fabricio.murta** · May 13, 2020, 2:00 AM

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.

**rgraham** · May 13, 2020, 5:06 PM

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!

**rgraham** · May 18, 2020, 10:30 PM

Hi Fabricio,

Still banging my head on the wall here. I will try to assemble a test case to reproduce the problem, but, most of the time, problems that crop up in complex applications do not show themselves in simple test apps.

After looking at this some more, I see that the TabPanel is highlighting the handle of the tab it should display, but it actually shows the tab one higher in the tab order.

Meaning that when more than two tabs have been opened, if the focus was not on the last tab, there will not be a "blank content" situation.

Put in methodical description. Open Tab1, then Tab2, then Tab3. Now focus on Tab2. Next open Tab4. Finally close Tab4. Tab2 should become focused and visible. Instead, Tab2 gets it's focus highlight, but Tab3 has it's content visible and has the selected appearance (not the focused dashed line).

See illustration attached. "Purge Viewer" was the selected, visible tab. Then I opened a third tab. Then I closed the third tab and "Purge Viewer" should have become highlighted, selected and visible.

Click image for larger version.

Name: Wrong tab selected.jpg
Views: 69
Size: 54.1 KB
ID: 25337

Instead "Purge Viewer" is highlighted, but the NEXT tab is selected and visible. This shows that the reason I see the problem I do when closing the last tab, say Tab3, after Tab2 was the previously visible tab. It is putting the highlight dashed line on Tab2, but it is trying to make the NEXT tab visible, which is no longer in the tab group, hence the blank content situation.

Final comment in the blank content situation, the non-visible content is never actually gone, it is just not visible. Adding another tab and then going back to the blank tab always reveals its content is still there, and I can observe that the server was not called to re-fetch the content.

Somebody among the developers must be able to have a pretty good guess as to how we're having this classic "off-by-one" situation, or how to add a workaround.

Thanks again, especially for your patience!

Bob Graham

**rgraham** · May 19, 2020, 12:09 AM

Still digging,

Discovered the beforeshow event, which didn't help. Then I discovered the afterrender event.

The afterrender even fires just as expected, except if you close the last tab and the previously viewed tab was the next to last tab.

Heading home, but wanted to show you this screenshot before I leave so you will see it before I come in tomorrow morning.

Thanks, Bob Graham

Click image for larger version.

Name: tab never rendered selected.png
Views: 90
Size: 93.2 KB
ID: 25338

**fabricio.murta** · May 19, 2020, 3:18 AM

Hello Bob! I will try to answer by quoting some parts of your last two posts, hope it results in a clear response. :)

Originally Posted by rgraham

Still banging my head on the wall here. I will try to assemble a test case to reproduce the problem, but, most of the time, problems that crop up in complex applications do not show themselves in simple test apps.

Okay, I just hope you understand how difficult it is for us to help when we can't reproduce the issue. We can return some ideas but, that's kind of a "shoot in the dark", and it may become frustrating for both parties as the thread just gains pages, pages, and the issue does not get resolved. As long as you understand that we are doing our best to help you, all things considered, I guess that's alright.

Originally Posted by rgraham

Put in methodical description. Open Tab1, then Tab2, then Tab3. Now focus on Tab2. Next open Tab4. Finally close Tab4. Tab2 should become focused and visible. Instead, Tab2 gets it's focus highlight, but Tab3 has it's content visible and has the selected appearance (not the focused dashed line).

Okay, take a look at this animation I did. I tried to the best of my ability to precisely follow your step thru, and as a result, well, you can see it works just fine.

Originally Posted by rgraham

Discovered the beforeshow event, which didn't help. Then I discovered the afterrender event.

It didn't help... because it triggers at the time you have the issue raise, right?

Originally Posted by rgraham

The afterrender even fires just as expected, except if you close the last tab and the previously viewed tab was the next to last tab.

This makes sense. I mean, why should afterrender trigger if there's no component being rendered? There's a logic in the tabs that maybe you missed:
1. you create a tab, it gets rendered. afterrender fires as soon as Ext JS decides it should have already been rendered on screen.
2. you switch to another (existing) tab. afterrender is not fired, nothing is rendered; because the old tab is set to CSS-hidden whilst the switched tab is set to CSS-visible. No rendering takes place.

Even if a tab has a loader the tab itself does not need to be rendered even if you determined/programmed it to re-load its inner loaded content on show (and you'd be using an event to make it re-load every time it is switched to).

I'm sorry if the response is not really helpful. I genuinely can't reproduce the issue and with the information I could gather so far, it makes no sense for the tab not to be switched. I suspect there may be another client-side code (javascript) that used to work in 2.5 that is not working in v5, simply because it has hit a breaking change -- either a "supported and documented" breaking change, or a breaking change that doesn't get documented (common if any of your code hits private/"protected" Ext JS entitites).

I think you could decide on two approaches to reduce your page into the minimal set to reproduce the issue, and break through the issue in that chosen approach. Either 'top-down' by making an identical copy of the page and iteractively remove components or part of the code until you can't reproduce the issue; or 'bottom-up', from a simple bare page, gradually and selectively (as possible) add components of the real page until you reproduce it.

First thing you should check either way is, if there's any override you used to that page try to remove (or add) it first, as chances is that overrides are influencing how the page behaves.

You may also want to look for "rogue lefovers" from the v2.5 version, like some included javascript source (which could bring overrides), and also consider -- if you are using a master page -- if something may be coming from there. If you check sources in F12 developer tools in browser, you may check one by one of the actual referenced scripts in the final rendered page; maybe there's a rogue poking the code to give you that much headache.

Hope this (somehow) helps, that's all I can think about right now. Sorry for the very long answer.

**rgraham** · May 19, 2020, 4:12 PM

I appreciate the continued help Fabricio!

I am revisiting the logic to see what I may have missed. Since the beforeshow event does fire, I am looking to see if there's a way to intercept at this point and arbitrarily set the selected property, because, in the end, that's where something is breaking, as my screenshot shows, the focused tab and the selected tab are not the same. (Therefore, if the focused tab was the last tab, the afterrender event never fires because there is nothing to render).

It helps to have someone knowledgeable to talk back and forth with, and yes, I completely understand that you are powerless to directly point to a fix for an issue that is not a known issue and/or is not affecting most customers.

Do you have any code snippets that would properly show how to navigate the TabPanel's Tab collection and set the "selected" property programmatically?

I feel a bit lost here without some of the tools available for working with ExtJs since EXT.NET seems to be aimed at not delving into the ExtJs too much, and relying on the EXT.NET declarative markup more.

There is an "Inspector" tool available from Sencha, that is advertised at being free. But when I try to install it it wants me to have a JRE installed, which I prefer to avoid. Would this tool perhaps be helpful?

Thanks and I'll get back with more of what I find after troubleshooting more in the tab's before/after events.

We don't touch the tabs in our application other than the declaration of the tabpanel and the JavaScript method of adding tabs as seen in my original post. I'm left to wonder if there is something in the HTML/iFrame we are putting into the tab that is breaking the TabPanel's collection of tabs, or their ordinal values?

Bob Graham

Thread: Tab close, doesn't show previous tabs

Thread Tools

Search Thread

Display

Tab close, doesn't show previous tabs

Similar Threads

On Chrome : Combobox on example auto close dropdown after press page next or page previous

[CLOSED] Help required - Add Tab and Close Tab design architecture

How to close all tabs in TabPanel

TabPanel with plugins to rename tab inline, add a new tab using plus button in tab list and confirm close

Modify Tab/Close Tab & Close Other Tab

Posting Permissions

Sitemap

Downloads

Resources

Thread: Tab close, doesn't show previous tabs

Tab close, doesn't show previous tabs

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us