PDA

View Full Version : hiding and showing tabs in a tabpanel



pailyanish
8 Oct 2009, 2:11 AM
how to hide a tab inside a tabpanel and show it on trigging an event

thanks in advance

nicobarten
8 Oct 2009, 2:19 AM
listeners: // tabpanel listeners
{
beforeadd: function(myContainer, myComponent, index)
{
if(myComponent.title == "test") // tab title = test?
{
return false; // don't display this tab
}

}
}

Or just set in the tab properties:

hidden: true

Then for the event - let's say a button, in the event:



xtype: 'button',
text: 'click me',
handler: function()
{
myTab.show(); // didn't test this one, it seems logical to me.
}

pailyanish
8 Oct 2009, 3:03 AM
in my case i have given tabpanel as


var tabs = new Ext.TabPanel({
id:'layer_tab',
height:500,
width:600,
renderTo:'layer',
activeTab: 0,

items:[
layerTreeLib,
selected,
],

listeners: // tabpanel listeners
{
beforeadd: function(myContainer, myComponent, index)
{
if(myComponent.title == "Layer Manager") // tab title = test?
{
return false; // don't display this tab
}

}
}
});

where layertreelib and selected are two treepanels

in my case i should get selected hidden on loading page

and click a check box in layertreelib selected tab should be shown

nicobarten
8 Oct 2009, 3:19 AM
And if you try it like this:



xtype: 'tabpanel',
items: [
{
// this is the first tabpanel
title: 'Layer Manager',
layout: 'fit',
items: [
{
// here comes your treepanel
}]
},
{
// your second tabpanel
id: 'tabSelected',
title: 'Selected',
layout: 'fit',
hidden: true, // don't show at start
items: [
{
// here comes your second treepanel
}]
}]
And then to show the 'Selected'-tab, in the button event (or whatever event you want):



Ext.getCmp('tabSelected').show();


O, btw, next time, try to make your code in your post more readable, using the CODE tags.

arian10daddy
5 Nov 2009, 6:47 AM
Well, looks like extJS takes the meaning of 'hide' for a tab as 'not showing that tab's content to the user', but the tab still exists and user can always click on it to view the content.

What I need is to make the tab invisible until a trigger shows it up again. Can that be done?

Please tell me the code to make it invisible and visible again. I'm in some serious time constraints here, so I would appreciate if you could also mail me with the reply at [email protected]!

Thanks a ton in advance! cheers!:)

tubamanu
5 Nov 2009, 7:07 AM
what about disabling a tab. the tab is visible, but if u click on it, nothing happens....


Ext.getCmp('item_in_your_tabpanel').setDisabled(false);

dommellenny
5 Nov 2009, 7:08 AM
if the tab may remain visible but not clickable just use
disabled: true,

Animal
5 Nov 2009, 7:19 AM
If you want a tab selector hidden (As opposed to greyed out) when the associated Panel is disabled, change what the class applied to the selector does.

The class name "x-item-disabled" is added to the selector element.

You can add CSS rules which mean that when it's a disabled selector element in a tab strip, it's not displayed.



.x-tab-strip li.x-item-disabled {
display: none;
}