PDA

View Full Version : TabPanel: adding hidden tab



fermo111
10 Dec 2007, 9:33 AM
What is the right way to add a hidden tab to a TabPanel?
I could not find a 'visible/hidden' property in the config object.
I have tried to use the hideTabStripItem method after having added the tab
but that hides only the strip.
I have tried the hide() and setVisible(false) methods but they do not work

Any help?

Luca

tryanDLS
10 Dec 2007, 9:55 AM
hideTabStripItem(..) will hide the tab for a specific tab item - it probably can't be the active tab however.

fermo111
10 Dec 2007, 10:20 AM
hideTabStripItem(..) will hide the tab for a specific tab item - it probably can't be the active tab however.

Therefore the answer is...?

Just to make an example. Suppose I have this loop that creates tabs:
var index = 0;
while(index < 4){
addTab(index == 2);
}

function addTab(hidden){
tabs.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '<br/><br/>'
+ Ext.example.bogusMarkup,
closable:true
}).show();

// how do I handle the hidden argument?

}

tryanDLS
10 Dec 2007, 10:25 AM
Why call show on each one that you add. Add them all and then call activate on the one that should be shown. Other non-active ones can be hidden via hideTabStripItem.

fermo111
10 Dec 2007, 10:54 AM
Thanks tryanDLS,

I am now able to hide the tab.


Why call show on each one that you add.

Because if I don't the following code does not work (I don't know why):


<div id="divTabs" style="margin:15px 0;">
<div id='tab1'>Tab 1</div>
<div id='tab2'>Tab 2</div>
<div id='tab3'>Tab 3</div>
<div id='tab4'>Tab 4</div>
</div>

var index = 0;
while(index < 4){
addTab(index == 2);
}

function addTab(hidden){
var tab = tabs.add({
id: 'idtab' + (++index),
contentEl: 'tab' + index,
title: 'New Tab ' + index,
closable:true
}); //.show(); <=== without show() the content of the tabs appear outside
if (hidden) {
tabs.hideTabStripItem(tab);
}
}
tabs.activate('idtab1');


In fact I am having trouble to understand how to apply existing HTML elements to the tabs.

Thanks

Luca

tryanDLS
10 Dec 2007, 11:02 AM
Rather than calling show, you might try calling tabPanel.doLayout() after they're all added.

Have you looked at tabs example? It shows how do this without calling add manually for each one.

fermo111
10 Dec 2007, 11:30 AM
Rather than calling show, you might try calling tabPanel.doLayout() after they're all added.
No effect.



Have you looked at tabs example? It shows how do this without calling add manually for each one.

OK. I discovered that adding class="x-hide-display" to the tab markup fixes the problem. The following code seems to work fine:


<div id="divTabs" style="margin:15px 0;">
<div id='tab1' class="x-hide-display">Tab 1</div>
<div id='tab2' class="x-hide-display">Tab 2</div>
<div id='tab3' class="x-hide-display">Tab 3</div>
<div id='tab4' class="x-hide-display">Tab 4</div>
</div>

var index = 0;
while(index < 4){
addTab(index == 2);
}

function addTab(hidden){
var tab = tabs.add({
id: 'idtab' + (++index),
contentEl: 'tab' + index,
title: 'New Tab ' + index,
closable:true
});
if (hidden) {
tabs.hideTabStripItem(tab);
}
}
tabs.activate('idtab1');

But I don't know if the tab that must be hidden will show for a moment during the construction. I have to try this in a more complex situation where the tab contents takes some time to build.

Thanks a lot

Luca