1. 13 Apr 2007 12:42 AM #1
    joycoder
    joycoder is offline
    Ext User
    Join Date
    Apr 2007
    Posts
    13
    Vote Rating
    0
    joycoder is on a distinguished road
      0  

    Default [Beta2]nestedlayout render error

    [Beta2]nestedlayout render error


    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>
    Attached Images
    Reply With Quote Reply With Quote
  2. 13 Apr 2007 3:30 AM #2
    rmorrissey
    rmorrissey is offline
    Ext User
    Join Date
    Apr 2007
    Posts
    8
    Vote Rating
    0
    rmorrissey is on a distinguished road
      0  

    Default


    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:

    HTML 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:

    HTML Code:
    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.
    Reply With Quote Reply With Quote