1. #1
    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

  2. #2
    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.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."