bkardell@gmail.com
22 Jan 2010, 8:36 AM
The example below contains the explanation in the running example. This code has been working since Ext 2.0, through several updates, and is suddenly problematic after updating 3.0.3 -> 3.1.0.
Given the scenario below, any tab panel that has been viewed at least once and is inactive during resize will experience strange a result (shown in example): One of the panels is mysteriously hidden (title is still visible, so "collapsed" maybe is a better description?) when the tab is reactivated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Example
</title>
<link href="script/ext-3.1.0/resources/css/ext-all.css" rel="stylesheet"
type="text/css" />
<script src="script/ext-3.1.0/adapter/ext/ext-base-debug.js">
</script>
<script src="script/ext-3.1.0/ext-all-debug.js">
</script>
<script type="text/javascript">
<!--
Ext.onReady(
function() {
var seed = 1;
var getProblematicConfig = function() {
return {
xtype: "panel",
title: "Tab #" + seed++,
layout: "border",
items: [
{
region: "north",
title: "north panel",
html: "<div>test</div>"
},
{
region: "center",
title: "center panel",
html: "<div>test</div>"
}
]
}
}
new Ext.Viewport({
layout: 'border',
id: 'myViewport',
items: [
{
xtype: 'panel',
region: 'center',
layout: "fit",
items: [
{
xtype: 'tabpanel',
id: 'myTabPanel',
border: true,
activeItem: 0,
items: [
{
xtype: 'panel',
title: 'Welcome',
html: '<div style="padding:20px">This page ' + 'demonstrates the problem that ' + 'we are experiencing with strange re-layout behavior ' + 'which only occurs after inital rendering. ' + 'This problem began after updating from 3.0.3 to ' + '3.1.0 with code has worked since 2.0.' + 'To replicate the problems:' + '<ol style="padding: 10px;list-style-type:decimal">' + '<li>First view the initial tabs and note that ' + 'each lays out nicely.</li>' + '<li>Refresh the browser.</li>' + '<li>With the first tab selected, resize the ' + ' window.</li><li>Flip between the tabs and ' + 'note that things look fine.</li>' + '<li>Refresh the browser.</li>' + '<li>Select "Tab #1" then resize the window.</li>' + '<li>Flip back and forth between the tabs and note ' + 'that all the tabs seem to layout nicely.</li>' + '<li>Select "Tab#3" then resize the window. Note ' + 'that things seem to layout nicely in this tab.' + '</li><li>Flip back and forth and note that "Tab #1 and ' + '"Tab #2 are now missing the content in north(it is ' + ' hidden)... Why?</li><li>Try with several variants and ' + ' and you will see that the active tab always ' + 'remains intact and that anything that has not ' + 'yet been viewed will layout correctly while ' + 'inactive tabs that have been viewed before will ' + 'be incorrect.</li></ol></div>'
},
getProblematicConfig(),
getProblematicConfig(),
getProblematicConfig()
]
}
]
}
]
});
});
// -->
</script>
</head>
<body>
</body>
</html>
Given the scenario below, any tab panel that has been viewed at least once and is inactive during resize will experience strange a result (shown in example): One of the panels is mysteriously hidden (title is still visible, so "collapsed" maybe is a better description?) when the tab is reactivated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Example
</title>
<link href="script/ext-3.1.0/resources/css/ext-all.css" rel="stylesheet"
type="text/css" />
<script src="script/ext-3.1.0/adapter/ext/ext-base-debug.js">
</script>
<script src="script/ext-3.1.0/ext-all-debug.js">
</script>
<script type="text/javascript">
<!--
Ext.onReady(
function() {
var seed = 1;
var getProblematicConfig = function() {
return {
xtype: "panel",
title: "Tab #" + seed++,
layout: "border",
items: [
{
region: "north",
title: "north panel",
html: "<div>test</div>"
},
{
region: "center",
title: "center panel",
html: "<div>test</div>"
}
]
}
}
new Ext.Viewport({
layout: 'border',
id: 'myViewport',
items: [
{
xtype: 'panel',
region: 'center',
layout: "fit",
items: [
{
xtype: 'tabpanel',
id: 'myTabPanel',
border: true,
activeItem: 0,
items: [
{
xtype: 'panel',
title: 'Welcome',
html: '<div style="padding:20px">This page ' + 'demonstrates the problem that ' + 'we are experiencing with strange re-layout behavior ' + 'which only occurs after inital rendering. ' + 'This problem began after updating from 3.0.3 to ' + '3.1.0 with code has worked since 2.0.' + 'To replicate the problems:' + '<ol style="padding: 10px;list-style-type:decimal">' + '<li>First view the initial tabs and note that ' + 'each lays out nicely.</li>' + '<li>Refresh the browser.</li>' + '<li>With the first tab selected, resize the ' + ' window.</li><li>Flip between the tabs and ' + 'note that things look fine.</li>' + '<li>Refresh the browser.</li>' + '<li>Select "Tab #1" then resize the window.</li>' + '<li>Flip back and forth between the tabs and note ' + 'that all the tabs seem to layout nicely.</li>' + '<li>Select "Tab#3" then resize the window. Note ' + 'that things seem to layout nicely in this tab.' + '</li><li>Flip back and forth and note that "Tab #1 and ' + '"Tab #2 are now missing the content in north(it is ' + ' hidden)... Why?</li><li>Try with several variants and ' + ' and you will see that the active tab always ' + 'remains intact and that anything that has not ' + 'yet been viewed will layout correctly while ' + 'inactive tabs that have been viewed before will ' + 'be incorrect.</li></ol></div>'
},
getProblematicConfig(),
getProblematicConfig(),
getProblematicConfig()
]
}
]
}
]
});
});
// -->
</script>
</head>
<body>
</body>
</html>