PDA

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



marxan
7 Sep 2010, 6:38 AM
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
7 Sep 2010, 6:51 AM
Any reason you are not using hideTabStripItem and unhideTabStripItem?

marxan
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?

Jaitsu
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).