PDA

View Full Version : [CLOSED][3.1] Tabpanel render bug



rblon
22 Dec 2009, 1:31 AM
I have posted this problem (http://www.extjs.com/forum/showthread.php?t=88120) last Friday in the help forum. There wasn't any response, and meanwhile I haven't been able to find the cause, so I am posting it now as a bug

Ext version tested:
Ext 3.1.0

Adapter used:
Ext

css used:
Only default ext-all.css

Browser versions tested against:
FF 3.5.6
Chrome 3.0
Safari 4.0
IE 8 (no issue)

Operating System:
Windows XP

Description:
TabPanel with nested vbox and hbox layout doesn't render correctly with Ext 3.1 (working fine with Ext 3.0)

Test Case:


Ext.onReady(function() {

var testWindow = function() {

var tabPanel = new Ext.TabPanel({
activeTab: 0,
items: [{
title: 'tab 1',
defaultType: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'spacer',
height: 25
}, {
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'label',
html: 'Text 1'
}]
}, {
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'label',
html: 'Text 2'
}]
}]
}, {
title: 'tab 2'
}]
});

var win = new Ext.Window({
title: 'Test',
width: 200,
height: 150,
layout: 'fit',
items: tabPanel
});

win.show(this);
}

new Ext.Button({
text: 'Click me',
handler: testWindow
}).render(Ext.getBody());
});


I have attached screenshots with Ext 3.0 and Ext 3.1, respectively.

Steps to reproduce the problem:
When you click the button, a window will open and "Text 1" and "Text 2" have the same position, while "Text 2" should be below "Text 1"

Debugging already done:
When I set activeTab: 1, and switch to "tab 1", it works fine, which indicates in my opinion it is a rendering issue.

Possible fix:
not provided

rblon
22 Dec 2009, 2:32 AM
I see now that this bug has been reported (http://www.extjs.com/forum/showthread.php?t=88251).
Giving the TabPanel height, as suggested in that thread as quickfix, does work.

Jamie Avins
14 Jan 2010, 10:24 AM
Looks good for 3.1.1