PDA

View Full Version : [Beta2]nestedlayout render error



joycoder
13 Apr 2007, 12:42 AM
in beta2,i edit a simple nestedlayout.html .i browse it in ie6,i find some render error.
pls see error.jpg and good.jpg.
When i open the page in firefox ,it is fine.but open it in ie6,render error;resize the ie window,mistake is corrected.
How to fix this?
Thanks already,


<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC --> <!-- LIBS -->
<script type="text/javascript" src="../../adapter/jquery/jquery.js"></script>
<script type="text/javascript" src="../../adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="../../adapter/jquery/jquery-plugins.js"></script> <!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
#header{
background: url(images/header-bar.gif) repeat-x bottom;
border-bottom: 1px solid #083772;
padding:5px 4px;
}
#footer{
background: url(images/header-bar.gif) repeat-x bottom;
border-top: 1px solid #083772;
padding:2px 4px;
color:white;
font:normal 8pt arial,helvetica;
}
#nav {
}
#nav, #inner1, #inner2 {
padding:0px;
}
#content p {
margin:5px;
}
#nav li {
padding:2px;
padding-left:10px;
background-image:url(images/bullet.gif);
background-position: -3px 6px;
background-repeat: no-repeat;
font-size:8pt;
display: block;
}
.x-layout-panel-north, .x-layout-panel-south, #content .x-layout-panel-center{
border:0px none;
}
#content .x-layout-panel-south{
border-top:1px solid #aca899;
}
#content .x-layout-panel-center{
border-bottom:1px solid #aca899;
}
</style>
<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new Ext.BorderLayout(document.body, {
north: {
initialSize: 25
},
center: {
autoScroll: false,
initialSize: 625,
titlebar: true
}
});
layout.beginUpdate();
var innerLayout = new Ext.BorderLayout('content', {
west: {
initialSize:900
},
center: {
initialSize: 100
}

});
var tb = new Ext.Toolbar('toolbar');
tb.add({
icon: '389.gif',
cls: 'x-btn-icon'
});
tb.add({
icon: '389.gif',
cls: 'x-btn-icon'
});
tb.add({
icon: '389.gif',
cls: 'x-btn-icon'
});
tb.add({
icon: '389.gif',
cls: 'x-btn-icon'
});
tb.add({
icon: '389.gif',
cls: 'x-btn-icon'
});

var cp = new Ext.ContentPanel('inner2',{toolbar:tb});
innerLayout.add('west', new Ext.ContentPanel('inner1', "<b>More Information</b>"));
innerLayout.add('center', cp);

layout.add('north', new Ext.NestedLayoutPanel(innerLayout));
layout.add('center', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
layout.endUpdate();
}
};

}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body class="ytheme-gray">
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<div id ="container">

<div id="content" class="x-layout-inactive-content"></div>
<div id="inner1" class="x-layout-inactive-content">header</div>
<div id="inner2" class="x-layout-inactive-content">
<div id="toolbar"></div>
</div>
<div id="nav" class="x-layout-inactive-content">
content
</div>

</div>

</body>
</html>

rmorrissey
13 Apr 2007, 3:30 AM
I had an almost idenical problem yesterday.

I haven't run your code, although I think if you take the following part of your code:


innerLayout.add('west', new Ext.ContentPanel('inner1', "<b>More Information</b>"));
innerLayout.add('center', cp);

layout.add('north', new Ext.NestedLayoutPanel(innerLayout));
layout.add('center', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
layout.endUpdate();

And change it to:



layout.add('north', new Ext.NestedLayoutPanel(innerLayout));
layout.add('center', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
layout.endUpdate();

innerLayout.add('west', new Ext.ContentPanel('inner1', "<b>More Information</b>"));
innerLayout.add('center', cp);


I think you should find your problem disappears. Basically, when nesting BorderLayout, build them from the outside to the inside.