PDA

View Full Version : Nested BorderLayout Bug In 1.0b1 IE6?



dnixon
4 Apr 2007, 5:32 PM
I have created a slightly modified version of the complex layout example that demonstrates this problem. Can drop this into the examples/layout folder as complex_ie6_bug.html or whatever.
Using 1.0a3 (FF and IE6) and with 1.0b1 in FF 2.0.0.3 the black background of the ContentPane in the center of the nested BorderLayout extends all the way from the image to the right hand side.
In 1.0b1 IE6.0 the background color of the nested BorderLayout in the North area of the main Borderlayout (green area) shows up.
I think the difference occurs whether or not there's an image there.

Dave Nixon

complex_ie6_bug.html (much of the latin boilerplate removed to get under the 10k limit):
<html>
<head>
<title>Complex Layout Demonstrating IE6 problem in Ext 1.0 Beta</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- LIBS --> <script type="text/javascript" src="../../yui-utilities.js"></script> <script type="text/javascript" src="../../ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>

<!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
.x-layout-panel-north {
border:0px none;
}
#nav {
}
#autoTabs, #center1, #center2, #west {
padding:10px;
}
#north, #south{
font:normal 8pt arial, helvetica;
padding:4px;
}
#innerNorth{
font:normal 8pt arial, helvetica;
background-color: #afa;
}
#northNorth{
font:normal 8pt arial, helvetica;
padding:4px;
background-color: #aaf;
}
#northCenter{
font:normal 8pt arial, helvetica;
padding:0px;
background-color: #000;
}
.x-layout-panel-center p {
margin:5px;
}
#props-panel .x-grid-col-0{
}
#props-panel .x-grid-col-1{
}
</style>
<script type="text/javascript">
Example = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 114,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true
}
});

var innerNorth = new Ext.BorderLayout('innerNorth', {
north: {
split:false,
initialSize: 24,
titlebar: false
},
center: {
split:false,
initialSize: 90,
titlebar: false
}
});

layout.beginUpdate();
innerNorth.add('north', new Ext.ContentPanel('northNorth', 'NorthNorth'));
innerNorth.add('center', new Ext.ContentPanel('northCenter', 'NorthCenter', '<img src="../view/images/thumbs/sara_smile.jpg" width="120" height="90">'));
layout.add('north', new Ext.NestedLayoutPanel(innerNorth, "innerNorth"));
//layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true}));
layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
layout.add('center', new Ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
layout.getRegion('center').showPanel('center1');
layout.getRegion('west').hide();
layout.endUpdate();
},

toggleWest : function(link){
var west = layout.getRegion('west');
if(west.isVisible()){
west.hide();
link.innerHTML = 'Show West Region';
}else{
west.show();
link.innerHTML = 'Hide West Region';
}
}
};

}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<div id ="container">
<div id="west" class="x-layout-inactive-content">
Hi. I'm the west panel.
</div>
<div id="north" class="x-layout-inactive-content">
north - generally for menus, toolbars and/or advertisements
</div>
<div id="innerNorth" class="x-layout-inactive-content">
innerNorth - generally for menus, toolbars and/or advertisements
</div>
<div id="northNorth" class="x-layout-inactive-content">
north - generally for menus, toolbars and/or advertisements
</div>
<div id="northCenter" class="x-layout-inactive-content">
north - generally for menus, toolbars and/or advertisements
</div>
<div id="autoTabs" class="x-layout-inactive-content">
The layout manager will automatically create and/or remove the TabPanel component when a region has more than one panel. Close one of my panels and you can see what I mean.
</div>
<div id="center2" class="x-layout-inactive-content">
<p><a href="#" onclick="Example.toggleWest(this);return false;">Show West Region</a></p>
<p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
<p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Donec Fusce sem. Donec pharetra nibh sit amet sapien.</p>
<p>Aenean Sed eu diam.</p>
<p>Vestibulum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Vestibulum Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, In risus.</p>
<p>Donec gravida. ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="center1" class="x-layout-inactive-content">
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<p>Vestibulum semper. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, In risus.</p>
<p>Donec gravida. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="props-panel" class="x-layout-inactive-content" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south" class="x-layout-inactive-content">
south - generally for informational stuff, also could be for status bar
</div>
</div>
</body>
</html>

jack.slocum
4 Apr 2007, 8:57 PM
This is fixed in SVN. A workaround until that is released is to call layout.layout() after endUpdate().

dnixon
11 Apr 2007, 10:33 AM
I added the layout.layout() call as suggested but I still saw this problem in IE6 with 1.0beta1.
Resizing the browser window fixes it whether or not the layout.layout() call is there.
I just upgraded to 1.0beta2 and this issue is still there. My actual code uses a much wider image than the modified complex layout version above and the image is truncated by the green area otherwise I could work around this with suitable bg color.
Am using ext-all-debug.js.

Dave

dnixon
19 Apr 2007, 5:02 PM
I still see this problem in Ext 1.0 in IE6 and IE7 but not in FF2.0.
Adding layout.layout() after layout.endUpdate() doesn't fix it for me but
adding innerNorth.layout(); does fix it.