PDA

View Full Version : [CLOSED] Bug in TabPanel - Messed up by tab-visibility.



sveins12
Jul 21, 2016, 11:50 PM
Setting a child panel's hidden or visible property messes up the tab panel. Please see the example blow, and click the button "Show Panel 2":

One of the panels (Panel 2) is hidden by default. When trying to make it visible by javascript, it messes up the whole TabPanel.



@{
var x = Html.X();
}

@(

x.TabPanel()
.Items(
x.Panel()
.Title("Panel 1")
,
x.Panel()
.Title("Panel 2")
.Hidden(true)
,
x.Panel()
.Title("Panel 3")
)
.Buttons(
x.Button()
.Text("Show Panel 2")
.Handler(@"
this.up('tabpanel').items.items[1].setVisible(true);
")
)
)

sveins12
Jul 22, 2016, 12:01 AM
And there is a similar issue when disabling a child panel (tab) which is selected.

fabricio.murta
Jul 22, 2016, 1:04 AM
Hello @sveins12!

You probably need to specify CloseAction="hide" in the panel. It looks like this same issue has already been raised at least a couple times in the forums, for example in this thread: TabPanel show/hide panel (http://forums.ext.net/showthread.php?19826).

Give this example a look, it works just fine: Show Hidden tab panel (http://examples4.ext.net/#/TabPanel/Basic/Show_Hide/).

I hope this helps!

sveins12
Jul 22, 2016, 1:57 AM
But that is a different scenario. They are adding and removing tabs. The bug happens when trying to change the visibility of a tab.

fabricio.murta
Jul 22, 2016, 6:23 AM
Hello sveins12!

Sorry, the sample I linked to you illustrates showing an initially hidden tab in a tabPanel... I don't get it why it does not help you at all. And it works fine at my end.

Just to double-check, the linked example is Show Hidden tab panel (http://examples4.ext.net/#/TabPanel/Basic/Show_Hide/).

sveins12
Jul 22, 2016, 11:26 AM
Because that example uses tabPanel.addTab( childPanel ) and tabPanel.closeTab( childPanel ).

The bug that I describe happens when using childPanel.setVisible and childPanel.setHidden.

My point is that there is a bug. What I initially intended to do was to bind the the visible or hidden property to a ViewManager. But as long as there is this bug, then the tools don't do what they are intended to do (according to the documentation), and my design was not working because of that.

Ok, I understand that I can redesign and use a different approach to achieve a similar beaviour, not that elegant though. But that doesn't change the fact that there is a bug which should be fixed.

fabricio.murta
Jul 22, 2016, 7:28 PM
Hello!

A panel does not really know it is inside a TabPanel, and the equivalent to 'hide' in a TabPanel is when the tab's "CloseAction" is "Hide". Here two approaches that you may want to consider (one in tab2, disable/enable, which probably is not what you want) and another is like the example we provided: store the panel in the bin, and then just add it to the TabPanel, the difference here, during a panel.show() call.

As for the bug part, I understand your needs, but that seems a little outside an ordinary panel's role to deal up with the situation when it is inside a tabPanel -- or a situation where it should be in a tabPanel once shown.

I can see the best solution for this as a custom component, a panel specific to TabPanels, rather a tab itself, usable only and only inside a TabPanel list of components. This way it would be able to handle hide() and show() functionalities -- and initially hidden status -- nicely to tab panels.

I believe that imbuing these functionalities to ordinary panels will only make things slower, as any panel will be checking then if the immediate surrounding component is a TabPanel, to decide on which behavior it should take. Current design is the opposite: a TabPanel is responsible in getting the title and contents of a panel, so that the specific behavior is limited to when a TabPanel is actually used. An specific "tab" component, useable only inside a TabPanel could just inherit and "specialize" the common use cases of a Panel, handling the surrounding panel's tabstrip appropriately.