View Full Version : Dynamically changing the content of a tab

5 Aug 2010, 8:39 AM
Hi All,
I have a series of tabs in a tab panel and I need to change the content of one of them based on a selection elsewhere. The content is either a gridPanel or a series of fields and also a gridpanel. The tab is set to layout: "border".

Ideally what I want to do is hide or remove the gridPanel and replace it with a different panel, or possibly back again.
I initially tried having 2 different tabs which would work but would need to be able to hide one of them at any time.

Any suggestions for a potential solution would be great.


6 Aug 2010, 12:56 AM
Two solutions:
1. Use a card layout on the tab item.
2. Use two tab items and use show/hideTabStripItem to show/hide the tab.

6 Aug 2010, 12:58 AM
Thanks Condor,
Will the card layout add scrollbars for the grid and expand to fill the space automatically like it would in a border layout? I've never had to use that before. I know...RTFM :D

6 Aug 2010, 1:20 AM
I meant:

- tab1
- container with layout:'card'
- container with layout:'border'
- form with region:'north'
- grid with region:'center'
- grid
- tab3
(card layout descends from fit layout - tabpanel also uses it)

6 Aug 2010, 1:28 AM
thanks. trying it out now.

6 Aug 2010, 1:48 AM
Ok, that didn't work. Nothing is showing as per the image.
The tab item is set up with the following code. The grid item itself works fine and the form is basically a test panel with a label in it with hello world, a placeholder really The form itself is set to hidden so should not show - am I missing something?
Snippetnew Ext.Panel({
id: "pnlCardFindings",
title: "Findings",
layout: "card",
items: [
new Ext.Panel({
id: "pnlBorderFindings",
layout: "border",
items: [

6 Aug 2010, 1:49 AM
You need to select one of the cards, e.g.

layoutConfig: {activeItem: 0}

6 Aug 2010, 2:02 AM
Tried the activeItem but then if everything is inside a panel it would surely only have one item, tried 2 panels and then tried just the items directly since the form will be in a panel as it will also have a grid in it.

Nothing. same as before.

So, next question, is there a way to initialise the tab as being hidden initially or will it have to be done programatically. changing them using show/hideTabStripItem will work but would like the form hidden on load.


6 Aug 2010, 2:37 AM
1. I thought you needed a tab that could switch between two views (grid-a and form+grid-b)?

2. No, you would need to hide it in the render event of the tabpanel.

6 Aug 2010, 2:59 AM
Either would work. I need a tab that could contain 2 views but would equally happily have 2 different tabs, each containing different views that could be hidden/shown as needed.

Right now I just want a solution that will work and if it has 2 tabs pretending to be the same tab and just show/hide them then that works for me.

6 Aug 2010, 3:24 AM
I'd just like to say thanks. The show/hideTabStripItem is a winner - it just works and is exactly what I am looking for at this point. I should have tried this first. Thanks for all your help. The card layout would have been more elegant but just does not work.


6 Aug 2010, 3:26 AM
card layout would have worked too if you'd used it correctly, but stick with what works.

6 Aug 2010, 3:28 AM
Must be missing something. is there anything else you could suggest that I try. I may revisit it.

6 Aug 2010, 3:31 AM
As I said, if your current solutions works I wouldn't spend much time on it.

Some pointers:
1. You need to set the activeItem of a CardLayout to display a card.
2. Just like TabPanel (which uses card layout), configs like layoutConfig:{layoutOnCardChange:true} and defaults:{hideMode:'offsets'} are sometimes required.