PDA

View Full Version : [SOLVED] Nested panel won't hide in center region



Hani79
19 Nov 2010, 8:26 AM
I hit an issue where the "hidden" config option for a panel isn't working when the panel is nested in the center region of a viewport. Here's some simplified code to see the problem.



Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.QuickTips.init();

var tab1 = new Ext.Panel({
title:'Tab 1',
hidden:true
});

var tab2 = new Ext.Panel({
title:'Tab 2',
});

// VIEWPORT

var mainPanel = new Ext.TabPanel({
region:'center',
activeTab:0,
items:[tab1,tab2]
});

var northPanel = new Ext.Panel({
region: 'north',
bodyStyle:'background-color:#000;',
height:65,
border: false
});

var viewPort = new Ext.Viewport({
layout: 'border',
items: [northPanel,mainPanel]
});
});
Tab1 should be hidden and only tab2 should be showing - but both of them appear.

As another test, I added this listener to the viewport.



listeners: {
'render': {
fn:function(viewport){
tab1.hide();
}
}
}
It did nothing; tab1 was not hidden after the viewport was rendered.

Can anyone verify and give some insight if this is supposed to be happening or if its a bug?

Thanks!

Hani79
19 Nov 2010, 10:20 AM
Well, I figured this out and am posting in case anyone else hits the same problem.

Instead of "hiding" the tabpanel - I should have been using "hideTabStripItem" on the TabPanel. This will actually make the tab strip disappear.

Additionally, you can only do that after the TabPanel is rendered, so you should do so using an "afterrender" listener on the TabPanel.