View Full Version : Problem with tab. Hide/unhide a tab doesn't work on IE

7 Sep 2010, 6:38 AM

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,
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',
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';

7 Sep 2010, 6:51 AM
Any reason you are not using hideTabStripItem and unhideTabStripItem?

7 Sep 2010, 6:56 AM
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?

7 Sep 2010, 7:38 AM
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).