Problem with tab. Hide/unhide a tab doesn't work on IE

[marxan]

Hi,

This code works fine on FF but in IE, when I click on the display tab, it correctly hide this one and show the other one but afterwards when I click on the new panel both tabs dissapears as normally It should display again the first tab.

Anyone has an idea what it could be?

var tb1 = new Ext.TabPanel({
renderTo: 'ECE',
id: 'tabpanel',

defaults:{autoHeight: true},
border : true,
items:[
{
xtype: 'panel',
id: 'ECE',
autoLoad: {url: 'workbox1.cfm', params: 'bpcodeid=ECE', scripts: true},
title: 'Appointment Letters to Evaluation Experts',
iconCls: 'plus-icon',
listeners:{activate: displayTabContent1 }
},
{
xtype: 'panel',
id: 'title1',
title: 'Appointment Letters to Evaluation Experts',
iconCls: 'moins-icon',
html: 'content',
//collapsed:true
listeners:{activate: displayReduceTab1 }
}
]
});
tb1.getTabEl('title1').style.display = 'none';
 



function displayTabContent1(){
 
tb1.getTabEl('title1').style.display = "";
tb1.getTabEl('ECE').style.display = 'none';
 
}
 
function displayReduceTab1(){
// alert("display"+ tb1.getTabEl('title'));
tb1.getTabEl('ECE').style.display = "";
tb1.getTabEl('title1').style.display = 'none';
}

[Condor]

Any reason you are not using hideTabStripItem and unhideTabStripItem?

[marxan]

Because I didn't know there was a possibility to do that. Actually you sent that code to use 'style.display'.

How can I use tabStripItem?

Just by calling it in my function?

[Jaitsu]

tb1.getTabEl('title1').style.display = "";

You're not setting the display style property. This should be block or inline-block (not sure on the browser support here).