PDA

View Full Version : SOLVED: Border Layout in Tab produce problem in IE6



mrsunshine
20 Feb 2009, 6:28 AM
Hey,

i have a tabpanel with two tabs.

Tab 1 contains a border layout with 3 cols


...
layout:'border',
height: 746,
defaults: {
collapsible: false,
split: false
},
items: [{
id: this.id + 'colPos0',
region: 'west',
width: 188
},{
id: this.id + 'colPos1',
region: 'center'
},{
id: this.id + 'colPos2',
region:'east',
width: 188
}]on Tabchange from tab two to one the Center region becomes 100% of the tab width and hiddes the west and east region.

This happens only in IE6. on FF the nothing changes on the 3cols.

Any ideas what the f..... IE6 does? or where my problem could be located.

i already played around with minWidth and maxSize.

regards
nils

Condor
20 Feb 2009, 6:34 AM
1. Add layoutOnTabChange:true to the tabpanel config.
2. Add hideMode:'offsets' to the tabpanel item configs.

mrsunshine
20 Feb 2009, 8:51 AM
thank you for the tip, but it was not successfull in my case,
any other ideas

Animal
20 Feb 2009, 8:52 AM
That border layout Panel isn't contained inside another Panel which itself is added to the TabPanel is it? Show more.

mrsunshine
20 Feb 2009, 9:14 AM
ApplicationTabPanelLevel2 = Ext.extend(Ext.TabPanel, {

initComponent: function(){
Ext.apply(this, {
minTabWidth: 115,
tabWidth:135,
hideMode:'offsets',
enableTabScroll:true,
defaults: {
autoScroll:true
}
});

ApplicationTabPanelLevel2.superclass.initComponent.apply(this, arguments);
}, ...


Application3ColPanel = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.apply(this, {
layout:'border',
layoutOnTabChange:true,
height: 746,
defaults: {
collapsible: false,
split: false
},
items: [{
id: this.id + 'colPos0',
region: 'west',
width: 188//,
//maxSize: 188,
//minWidth: 188
},{
id: this.id + 'colPos1',
region: 'center'//,
//collapsible: false
},{
id: this.id + 'colPos2',
region:'east',
width: 188//,
// maxSize: 188,
// minWidth: 188
}]
});
Application3ColPanel.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('Application3ColPanel',Application3ColPanel);
here the things comes together


...
tabLevel2 = tabLevel1.add({
xtype:'ApplicationTabPanelLevel2',
id: idTabLevel2,
height: 746
});
tabLevel1.doLayout();

// Add the first tab to tabpanel 2
tabLevel2.add({
id: idViewPanel,
xtype:'Application3ColPanel'
});

...
hope the snippets have the right infos

Animal
20 Feb 2009, 10:44 AM
I'd guess it's just another extend-to-configure mess.

mrsunshine
20 Feb 2009, 11:03 AM
I'd guess it's just another extend-to-configure mess.

could be that it look like :), i copied the relevant configuration parts from my big application

mrsunshine
24 Feb 2009, 3:06 AM
1. Add layoutOnTabChange:true to the tabpanel config.
2. Add hideMode:'offsets' to the tabpanel item configs.

Thank you very much! This two points solved my problem!