julian_calaby
9 Jun 2010, 9:36 PM
Ext version tested:
Ext 3.2.1
Adapter used:
none (ext-base.js)
css used:
only default ext-all.css
Browser versions tested against:
IceWeasel 3.5.9 (equivalent to FireFox 3.5.9) (firebug 1.5.4 installed)
Google Chrome 5.0.375.70
Epiphany 2.30.2 (Webkit version 1.2.1)
Operating System:
Linux
Description:
In a container with a vBox layout:
A panel that has a frame, title, and is collapsed is not positioned correctly
A hidden panel is not positioned correctly when it is shown
Test Case:
<html>
<head>
<title>VBox Layout</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 type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: {
type:'vbox',
padding:'5',
align:'stretch'
},
defaults:{
margins:'0 0 5 0',
frame: true
},
items:[{
xtype:'panel',
html: "<h1>Panel 1</h1><p>Panel 1's content goes here</p>",
title: 'Panel 1'
},{
xtype:'panel',
html: "<h1>Panel 2</h1><p>Panel 2's content goes here</p>",
id: "hidden-panel",
hidden: true,
title: 'Panel 2'
},{
xtype:'panel',
html: "<h1>Panel 3</h1><p>Panel 3's content goes here</p>",
collapsed: true,
collapsible: true,
title: 'Panel 3'
},{
xtype:'panel',
html: "<h1>Panel 4</h1><p>Panel 4's content goes here</p>",
flex: 1,
title: 'Panel 4',
}, {
xtype: "button",
text: "Show Panel 2",
handler: function() {
Ext.getCmp("hidden-panel").show();
},
margins:'0'
}]
});
});
</script>
</head>
<body>
</body>
</html>
Steps to reproduce the problem:
Load example
You should see that the collapsed panel, "Panel 3" is positioned at the top left corner of the page overlapping "Panel 1"'s title.
Click the button at the bottom ("Show Panel 2")
You should see that the previously hidden panel, "Panel 2" is positioned a the top left corner of the page overlapping "Panel 1"'s title.
The result that was expected:
Panel 3 appears between panel 1 and 4 as a collapsed panel
When shown, Panel 2 appears between panels 1 and 3 (4) as an open panel.
The result that occurs instead:
Panel 3 appears in the top left corner.
When shown, Panel 2 appears in the top left corner.
Debugging already done:
The cause of the main issue has been determined to be in the getVisibleItems() method in BoxLayout which doesn't take into account items that are collapsed but still visible.
The cause of the hidden panel issue appears to be because the (BoxLayout) layout manager does not re-lay-out the panel when items are shown.
Possible fix:
getVisibleItems() could be re-written to detect panels that are collapsed yet still have a title bar.
BoxLayout could potentially listen to show / hide events from the class it's managing and re-lay-out the container when this happens.
Workaround:
Wrapping the affected panels in another panel fixes their layout issues, however this is an unclean solution.
Ext 3.2.1
Adapter used:
none (ext-base.js)
css used:
only default ext-all.css
Browser versions tested against:
IceWeasel 3.5.9 (equivalent to FireFox 3.5.9) (firebug 1.5.4 installed)
Google Chrome 5.0.375.70
Epiphany 2.30.2 (Webkit version 1.2.1)
Operating System:
Linux
Description:
In a container with a vBox layout:
A panel that has a frame, title, and is collapsed is not positioned correctly
A hidden panel is not positioned correctly when it is shown
Test Case:
<html>
<head>
<title>VBox Layout</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 type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: {
type:'vbox',
padding:'5',
align:'stretch'
},
defaults:{
margins:'0 0 5 0',
frame: true
},
items:[{
xtype:'panel',
html: "<h1>Panel 1</h1><p>Panel 1's content goes here</p>",
title: 'Panel 1'
},{
xtype:'panel',
html: "<h1>Panel 2</h1><p>Panel 2's content goes here</p>",
id: "hidden-panel",
hidden: true,
title: 'Panel 2'
},{
xtype:'panel',
html: "<h1>Panel 3</h1><p>Panel 3's content goes here</p>",
collapsed: true,
collapsible: true,
title: 'Panel 3'
},{
xtype:'panel',
html: "<h1>Panel 4</h1><p>Panel 4's content goes here</p>",
flex: 1,
title: 'Panel 4',
}, {
xtype: "button",
text: "Show Panel 2",
handler: function() {
Ext.getCmp("hidden-panel").show();
},
margins:'0'
}]
});
});
</script>
</head>
<body>
</body>
</html>
Steps to reproduce the problem:
Load example
You should see that the collapsed panel, "Panel 3" is positioned at the top left corner of the page overlapping "Panel 1"'s title.
Click the button at the bottom ("Show Panel 2")
You should see that the previously hidden panel, "Panel 2" is positioned a the top left corner of the page overlapping "Panel 1"'s title.
The result that was expected:
Panel 3 appears between panel 1 and 4 as a collapsed panel
When shown, Panel 2 appears between panels 1 and 3 (4) as an open panel.
The result that occurs instead:
Panel 3 appears in the top left corner.
When shown, Panel 2 appears in the top left corner.
Debugging already done:
The cause of the main issue has been determined to be in the getVisibleItems() method in BoxLayout which doesn't take into account items that are collapsed but still visible.
The cause of the hidden panel issue appears to be because the (BoxLayout) layout manager does not re-lay-out the panel when items are shown.
Possible fix:
getVisibleItems() could be re-written to detect panels that are collapsed yet still have a title bar.
BoxLayout could potentially listen to show / hide events from the class it's managing and re-lay-out the container when this happens.
Workaround:
Wrapping the affected panels in another panel fixes their layout issues, however this is an unclean solution.