PDA

View Full Version : Hiding tabpanel strip



mitchellsimoens
7 Mar 2010, 9:24 PM
I've done multiple things and it still doesn't do what I expect. What I want is to be able to hide the tab strip. This is what I've tried:


tabpanel.strip.slideOut('t', {
easing: 'easeOut',
duration: .5,
remove: false
});

tabpanel.stripWrap.slideOut('t', {
easing: 'easeOut',
duration: .5,
remove: false
});

tabpanel.header.slideOut('t', {
easing: 'easeOut',
duration: .5,
remove: false
});

The first works but then leaves a blue element (stripWrap) still there. This was fixed with the second but leaves a plain element (header) to which is the header. I do the third and it works but after the animation is done, it jumps back down so the size is still there even though it should be hidden.

How can I hide the strip and basically just show the active tab body?

ZeusTheTrueGod
8 Mar 2010, 12:09 AM
TabPanel is a Panel with 'card' layout + TabStrip. You want to remove tabstrip.
My suggestion: Create a panel with 'card' layout, move there items from TabPanel, set active item and after that replace TabPanel with new panel.

Other suggestions: find with firbug tabstrip container and make 'display:hidden' or 'visibility:hidden'. This is a way how I usually work with ExtJs components when they should be tweaked. When you made something in firebug repeat it programmatically using Ext.DomQuery and Ext.Element

Animal
8 Mar 2010, 12:26 AM
What kind of UI are you trying to achieve? There's probably a better way.

mitchellsimoens
8 Mar 2010, 6:10 AM
I don't want to remove the strip, I just want to hide it so that I can show it only when needed.

Animal
8 Mar 2010, 6:58 AM
The structure is stored in the header, so you could hide that.

Don't forget it's the header which supplies the top border.

So remove the class "x-tab-panel-body-top" from the body, and add the class "x-panel-body-noheader" when hiding it.

Reverse this operation when showing again.

Or write a quick TabPanel plugin which adds a "toggleTabStrip" method and show us all.

mitchellsimoens
8 Mar 2010, 7:42 AM
So I did this:


listeners: {
remove: function(tabpanel, tab) {
console.log(tabpanel);
tabpanel.header.hide();
tabpanel.bwrap.removeClass("x-tab-panel-body-top");
tabpanel.bwrap.addClass("x-panel-body-noheader");
}

And it adds the top border and hides the tab strip but the space for the header is still there. The body doesn't expand to fill the space. Do I need to update the size when I do this?

mitchellsimoens
8 Mar 2010, 8:19 AM
With doing the hide, removeClass, and addClass, the body looks like it should but the space for the header is still there. I have attached 3 screen shots that will show what I mean. The third is the one that shows the header space is still there. I tried attaching display:none in firebug but that didn't change anything either.

Animal
8 Mar 2010, 8:25 AM
Try calling



delete myTabPanel.lastSize;
myTabPanel.ownerCt.doLayout();


So that the owner of the TabPanel requests the TabPanel to resize itself (and the TabPanel doesn't ignore it thinking it has nothing to do)

mitchellsimoens
8 Mar 2010, 8:32 AM
At first I didn't have an owner so I threw it into a normal Panel and tried the two lines but still kept that strip space.

Animal
8 Mar 2010, 8:36 AM
The header element's visibilityMode!

mitchellsimoens
8 Mar 2010, 8:49 AM
The header element's visibilityMode!

There's the genius shining thru! :))

So I got it to disappear so plugin coming up!