PDA

View Full Version : [FIXED-486][3.1] region in inactive tabs hidden on resize after upgrade from 3.0.3



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>

Animal
22 Jan 2010, 8:50 AM
Border regions need a size. So your norths must have a height.

Make your Viewport layout: 'fit' and put the TabPanel directly into it.

Why is it that people think Viewport === border layout???????????????

bkardell@gmail.com
22 Jan 2010, 9:46 AM
Animal,

The example was created from real-world code that I just trimmed down and omitted the extraneous regions -- it's not an assumption about Viewport, just how it trimmed down easily :) Unfortunately I also cut out the heights which are there in the real code.... I _think_ that this (below) is the approach that you were suggesting, however, this code performs in the exact same way (and as I explained earlier is a difference from 2.0, 3.0, etc. which makes me think that perhaps it's a bug).

I see your replies on here a lot, so I'm inclined to think that I'm just misunderstanding... Sorry if I am seeming dense, but - do you see something that I am missing - or does this really look like a bug to you too?



<!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="/maui-commons-server/script/ext-3.1.0/resources/css/ext-all.css"
rel="stylesheet" type="text/css" />
<script src="/maui-commons-server/script/ext-3.1.0/adapter/ext/ext-base-debug.js">
</script>
<script src="/maui-commons-server/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",
height: 100,
title: "north panel",
html: "<div>test</div>"
},
{
region: "center",
title: "center panel",
html: "<div>test</div>"
}
]
}
}

new Ext.Viewport({
layout: 'fit',
id: 'myViewport',
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>

mlavender
22 Jan 2010, 10:16 AM
I'm having a very similar problem since upgrading to 3.1, with code that has been working fine for the past 1-1/2 years. In Internet Explorer it's actually causing the browser to crash and restart with "Internet Explorer has stopped working".

In my case, I do not have a viewport, but am loading several existing DIV elements into child elements of a TabPanel. I can't see what would cause this behavior to stop working to the extent that it now is, given that it's worked fine in Ext for so long up to this point. Any help or simply ideas as to what changed in the TabPanel code so I can know where I might be going wrong would be hugely appreciated.

Animal
22 Jan 2010, 10:46 AM
Animal,

The example was created from real-world code that I just trimmed down and omitted the extraneous regions -- it's not an assumption about Viewport, just how it trimmed down easily :) Unfortunately I also cut out the heights which are there in the real code.... I _think_ that this (below) is the approach that you were suggesting, however, this code performs in the exact same way (and as I explained earlier is a difference from 2.0, 3.0, etc. which makes me think that perhaps it's a bug).

I see your replies on here a lot, so I'm inclined to think that I'm just misunderstanding... Sorry if I am seeming dense, but - do you see something that I am missing - or does this really look like a bug to you too?

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

No, there are some problems with the 3.1 layout code which are being addressed right now.

One further suggestion would be doing something which I always do with any card layout. Make the cards hideMode: 'offsets'

Jamie Avins
25 Jan 2010, 7:39 AM
Have you tried, or can you try this with svn 5938?

bkardell@gmail.com
26 Jan 2010, 9:19 AM
If I had subversion access I could - but apparently I dont.

Jamie Avins
26 Jan 2010, 9:24 AM
How about the 3.1.1 beta?

bkardell@gmail.com
26 Jan 2010, 9:55 AM
Things work even less well in the beta :)

Jamie Avins
26 Jan 2010, 10:02 AM
element rendered issues in doLayout?

bkardell@gmail.com
26 Jan 2010, 10:23 AM
I'm sorry - I dont understand the response... If you are asking me what the problem is - I don't know, that's why I'm posting it here :) If not - please clarrify.

I have included a functional sample above, if you have access to svn you are free to see the implementation and plug in any ext build you like.

Jamie Avins
28 Jan 2010, 1:33 PM
This seems to work without issue in svn 5954. If you still see an issue when 3.1.1 beta2 is released (in the next few days or so), I'll reopen this thread.