[UNKNOWN][3.1] border layout in tabpanel issue [Archive]

baiej214

8 Jan 2010, 11:17 PM

Ext version tested:

Ext 3.1.0

Adapter used:

ext

css used:

only default ext-all.css

Browser versions tested against:

____
IE8
FF3 (firebug 1.4.5 installed)
Google Chrome

Operating System:

________
WinXP Pro

Description:

At the first, please forgiven my english is not well. Thanks!!

There is a tabpanel with some tabs, the first tab's layout is 'border' with 'center' and 'west', others are 'fit'.
When you change the activetab to second tab or others, then resize your browser, and changeback to the first tab, the west part was hidden, and the center part was 100% width.

Please forgiven my english is not well again. Thanks!!

Test Case:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tabs Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script language="javascript">
Ext.onReady(function()
{
var tabpanel = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
height: 600,
items: [{
title: 'Normal Tab',
layout: 'border',
border: false,
items: [{
region: 'center',
html: '<b>CENTER</b>'
},{
region: 'west',
collapseMode: 'mini',
split: true,
width: 100,
html: '<b>WEST</b>'
}]
}, {
title: 'Ajax Tab 1'
}, {
title: 'Ajax Tab 2',
autoLoad: {
url: 'ajax2.htm',
params: 'foo=bar&wtf=1'
}
}, {
title: 'Event Tab',
html: "I am tab 4's content. I also have an event listener attached."
}, {
title: 'Disabled Tab',
disabled: true,
html: "Can't see me cause I'm disabled"
}]
});
});
</script>
</head>
<body>
</body>
</html>
Screenshot or Video:

http://www.extjs.com/forum/attachment.php?attachmentid=18186&stc=1&d=1263021584
http://www.extjs.com/forum/attachment.php?attachmentid=18187&stc=1&d=1263021584
http://www.extjs.com/forum/attachment.php?attachmentid=18188&stc=1&d=1263021584

plaak

9 Jan 2010, 10:30 AM

I reported this earlier this week... you can probably find it.

There's a good workaround though:

Set monitorResize = false in your tabPanel config.

baiej214

9 Jan 2010, 11:59 PM

Thanks for your reply and guide, plaak, i have found your reported.
I tried your suggestion, but there are still some problems.
If set the monitorResize = false, when you change back the first tab, it's seem to good, but when maximize the window, the panel in the first tab was not fit.

================================
And sometimes, the Toolbar would face the same problems, when resize the window, Toolbar would disappeared.

plaak

10 Jan 2010, 5:14 AM

Thanks for your reply and guide, plaak, i have found your reported.
I tried your suggestion, but there are still some problems.
If set the monitorResize = false, when you change back the first tab, it's seem to good, but when maximize the window, the panel in the first tab was not fit.

================================
And sometimes, the Toolbar would face the same problems, when resize the window, Toolbar would disappeared.

I'm fairly certain you need to insert your tabPanel inside an Ext.Viewport, instead of rendering it directly to the document body, if you want it to auto-resize properly (at least this works for me). It might have partially resized before this workaround, but monitorResize shouldn't even be available in 3.1 and will be removed (according to my reading of responses to my bug report).