Tab close, doesn't show previous tabs

Page 2 of 3 FirstFirst 123 LastLast
  1. #11
    Hi Fabricio,

    Hoping to catch you before end of day.

    I set some console.log on the beforeshow and activate events. Something is causing them to fire twice, once with the correct tab to show (on closing another tab), and then both events fire a second time with the next tab higher in the ordinal count. (This only happens when closing a tab, not when switching tabs.)

    So I decided to work on a workaround until we can figure out why this is happening. I have tried adding a sessionStorage value that basically says "skip me" and then a timeout that destroys that sessionStorage item a second later.

    This is working to return false on beforeshow and activate but then the tabpanel crashes on setactivetab. The documentation seems to indicate that returning false on beforeshow cancels the event, but this doesn't seem to work in practice.

    Is there a simple way to stop the tabpanel from processing the setactivetab? Overriding it looks scary, as it is a complex event that is probably part of a chain of events.

    I have not successfuly located the reason why beforeshow and activate are getting called a second time. In fact, these are just symptoms of the tabPanel setting active tab twice, right?

    I know I'm still asking you to work blindfolded, but I sure do appreciate your help!

    Bob Graham
  2. #12
    Hello again, Bob!

    Quote Originally Posted by rgraham
    Do you have any code snippets that would properly show how to navigate the TabPanel's Tab collection and set the "selected" property programmatically?
    Fiddling with a simple tab panel where I gave it the id mainTabPanel, I could get the list of IDs of the panels (that can be used to select the specific tabs) via:

    App.mainTabPanel.getTabBar().items.each(function(tab) { console.log(tab.card.id); });
    This is what you can use to select a given tab via

    App.mainTabPanel.setActiveTab(id);
    Quote Originally Posted by rgraham
    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.
    Yes, Ext.NET is meant to remove the burden of javascript and focusing in C#. But the possibilities with Ext JS are so many that even in our examples you will often find client-side code. Especially when you want (or need) to go "out of the box", you'd ultimately have to javascript to some extent. But it still makes life easier with many other possibilities from direct methods.

    For instance, from the above code, code behind to get the list of tabs currently in a tab panel (first code block) is not really practical, as due to the nature of client-server communication in WWW you end up needing the client-side code anyway.

    On the other hand, the server-side mainTabPanel.SetActiveTab(id) is pretty plausible. Given you know the ID of the tab you want to show; you can associate a bigger server-side code with it to, once finished, show the desired tab, without further wiring server-response-with-client-side-effect; so in this case you don't really need to know how to select tabs client-side -- if you know the ID and don't need to traverse the tab for present tabs you'd want to show.

    Quote Originally Posted by rgraham
    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?
    I never used Sencha Inspector, and I don't really know how "free" it is; not sure it would mingle together with Ext.NET nicely or it'd require applications to be built fully in JavaScript, maybe with other Sencha tools, in order to be more useful.

    Quote Originally Posted by rgraham
    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?
    I don't think that should be the case; at least an exception should have been thrown if that was the case, and you'd have been seeing red error messages blinking on your developer tool as you run the page with issues. Me not thinking it should be the case does not necessarily mean it is not the case, though. :)

    Maybe this bit of information helps (if I am not just repeating this): more often than not, when reducing real-world cases to simple tests with Ext.NET-only code does not reproduce the issue, third party software is affecting the behavior. It could be other javascript libraries, NuGet packages, and also custom overrides or listener handlers. I see three outcomes of factoring a real-world code into a test case:

    1. you find an issue with Ext.NET
    2. you find an issue with code used to customize the component's behavior (that understandably worked in older versions)
    3. you find an issue with third-party code

    But at least you can isolate and demystify the cause of that "black magic preventing your code from working".

    I didn't see anything "off" from your "add tab" client-side handler though. So -if- it was cause (2), there would be another code lurking somewhere.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #13
    Hi Fabricio,

    Some progress here. I changed the beforeshow event as below, to forcibly set the correct activeTab after it tries to set the active tab off-by-one to the right:
    beforeshow: function (element) {    
        var tabToSet = sessionStorage.getItem('idShouldBeSet');
        var titleToshow = sessionStorage.getItem('titleShouldBeSet');
        if (tabToSet != null) {
            console.log('Tab to set is: ' + tabToSet + ' Title should be: ' + titleToshow);
            setTimeout(function () {
                var mainTabPanel = window.Ext.getCmp("mainTabPanel");
                mainTabPanel.setActiveTab(tabToSet);
                debugger;
                console.log(titleToshow + ', ID: ' + tabToSet + ' was set to active tab');
            }, 850);
        }
        console.log('Show, Title: ' + element.title + ', ID: ' + element.id);
        sessionStorage.setItem('idShouldBeSet', element.id);
        sessionStorage.setItem('titleShouldBeSet', element.title);
        setTimeout(function () {
            sessionStorage.removeItem('idShouldBeSet');
            sessionStorage.removeItem('titleShouldBeSet');
        }, 500);
    }
    This works nicely to set the activeTab when previous active tab was 1, and you close tab 3 (prevents it from focusing tab 1 but selecting and displaying tab 2). Essentially I'm storing the tab to set in sessionStorage the first time beforeshow is hit, and then correcting the set tab 850 milliseconds later. This only happens if the sessionStorage is not null, and that sessionStorage is destroyed at 500 milliseconds.

    However, still have an issue when there are only two tabs, it fails to make tab 1 visible when you close tab 2. This is our most significant scenario, very few users have permissions to access more than two functions and even more rarely would any user have three tabs open for any purpose.

    I'm starting to wonder if the Button we're adding as our menu button in the TabPanel is causing this problem? (See original post.) It looks like and is positioned as a non-closable tab, though I haven't thoroughly looked at how it ends up in the object model.

    Thanks, Bob Graham
  4. #14
    Hello Bob!

    This is just a guess by what you just said in the last post, but I believe you may be "barking at the wrong tree".

    This issue shouldn't be happening in the first place, other existing tabs in a tab panel are correctly selected when the active one is closed, as I shown you in the animated-gif last post.

    You should really really consider either factoring down the page (removing feature by feature until it works), or starting from a fresh one adding feature by feature until you notice the tab closing issue happen; then you'd be able to isolate which change is introducing the misbehavior and progressively pinpoint what the issue is.

    As you said in one of the first posts, you don't know how to reproduce this issue outside the own page. So perhaps if you come afresh you'll just skip whatever triggered that issue in the new version.

    There must be some code improperly adding a tab (so the tab panel could not know it still has a tab to display), or removing more tabs than it should when closing. Some code fiddling with the inner implementation of tab panel. This is what I believe to be the most likely thing to be happening there. So unless you get rid of that code, your page will not work properly. You'll keep hitting wall after wall and may end with a working but very slow page.

    Hope this helps.
    Fabrício Murta
    Developer & Support Expert
  5. #15
    Hi Fabricio,

    I agree with all you are saying in principle. It's just quite hard to do in very large application with hundreds of pages of code.

    Our first priority is to get this released as soon as possible. The fix above is reliable and doesn't cause a performance hit. I just need to figure out the "only two tabs" scenario.

    I will keep this in mind for the day when I can delve back in to this solution with more time on my hands.

    Thanks for all your help!

    Bob Graham
  6. #16
    Hello again, Bob!

    Sorry for insisting with that and thanks for the feedback!

    Use the App.mainTabPanel.getTabBar().items.each(function(tab) { console.log(tab.card.id); }); command I shared two posts before this one and try to manually show (setActiveTab()) right when you reproduce the issue.

    In case the tab still doesn't properly display, you may want to step thru setActiveTab() and compare what's different there in spite to a similar call to the panel you make before the issue is reproduced.

    This may help you at least identify what's different between the working and broken scenarios, and possibly help figure out a way to circumvent the situation.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #17
    HI Fabricio,

    Sorry to make this the "everlasting thread" :-)

    But it doesn't seem like the busiest forum, so I'm just trying to help you stay awake???

    Trying your advice, can't figure out where I'm going wrong, or perhaps this is a useful clue?

    There is no "card" property in the tab object:

    Click image for larger version. 

Name:	No such thing as card.png 
Views:	44 
Size:	10.5 KB 
ID:	25339

    I'll start researching it myself, but I just wanted to hit you with the preliminary question as early as possible.

    Thanks, your pain in the neck fiend, Bob Graham
  8. #18
    Hi again Fabricio,

    I've noticed something of interest.

    My temporary workaround for the wrong tab displayed is working beautifully. The hitch is that the tabpanel doesn't call all its events when only one tab exists. The beforeshow and activate events are never hit when adding the first tab or when closing a tab when only one tab will remain.

    Is there a command to force the tabpanel to render()?

    The ExtJs documentation is quite helpful on properties and events but less so on methods...

    Thanks Again.
  9. #19
    Hello Bob!

    Quote Originally Posted by rgraham
    My temporary workaround for the wrong tab displayed is working beautifully. The hitch is that the tabpanel doesn't call all its events when only one tab exists. The beforeshow and activate events are never hit when adding the first tab or when closing a tab when only one tab will remain.
    It would make sense to have the event called when creating the first tab. But there's more to it, I'll explain last.

    In the other hand, beforeshow and activate events are being called when closing the "one before last" tab. If they are not triggering for you, then that's some custom/third party code affecting the panel's behavior.

    Quote Originally Posted by rgraham
    Is there a command to force the tabpanel to render()?
    Why, yes, App.mainTabPanel.render() (documentation entry).

    beforeshow

    Back to the beforeshow not triggering on first tab inclusion blocking your case, I am afraid that event is not supposed to be triggered when a component is rendered "initially not hidden". It needs to be rendered as hidden and then have its show() method called -- or render, hide and show.

    For instance, if you create a simple page with a panel (not a tab panel), and give this panel a beforeshow event, it is not going to trigger if you render the panel not initially in the "hidden" state.

    If you add the panel with hidden="true", then once you call its show() method, the event gets fired. Or, of course, if you hide and show it back.

    But if we bring this hidden concept to Tab Panels, we hit some kind of design issue. Tab Panels work by hiding and showing panels in the same container (clicking through the tabs triggers hiding all panels and showing the panel corresponding to the clicked tab).

    So by default, adding a panel to a tab panel adds it in hidden state (to keep current tab shown). Then you can call setActiveTab() to properly run its logic to show the desired tab. The problem lies when there's no tab and you add a panel. It should show at once. And that's why the panel is rendered as "not hidden" and the beforeshow event never fires.

    If the beforeshow event is what you need to have it all working, what you can try to do is hide the whole tab panel until the first tab is added. Then -after- you add the first tab, you can call its show() method and have the event fire. But you probably want something else, maybe added (documentation entry).

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  10. #20
    Hi Fabricio,

    I found the remaining "symptom" of our problem. It was that, in the two tab scenario, closing the later one failed to remove the 'x-hidden-offsets' class from the final remaining tab.

    So my modified beforeclose handler:

    beforeshow: function (element) {
    	var tabToSet = sessionStorage.getItem('idShouldBeSet');
    	if (tabToSet != null) {
    		console.log('Tab to set is: ' + tabToSet);
    		setTimeout(function () {
    			App.mainTabPanel.setActiveTab(tabToSet);
    			var that = document.getElementById(tabToSet);
    			that.classList.remove("x-hidden-offsets");
    		}, 850);
    	}
    	sessionStorage.setItem('idShouldBeSet', element.id);
    	setTimeout(function () {
    		sessionStorage.removeItem('idShouldBeSet');
    	}, 500);
    }
    ...And we are good!!! Tadaaaa!

    Yes, we will do more analysis later to fix the cause rather than the symptom, but I wanted to share this before you go home for the day.

    Thanks, Bob Graham
Page 2 of 3 FirstFirst 123 LastLast

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