Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member wbutler's Avatar
    Join Date
    Aug 2010
    Posts
    12
    Vote Rating
    0
    wbutler is on a distinguished road

      0  

    Default [CLOSED]Nested Containers don't render properly in Viewport with no layout specified

    [CLOSED]Nested Containers don't render properly in Viewport with no layout specified


    I'm using the following code against 4.0-beta1:

    Code:
    new Ext.Viewport({
        items: [{
            xtype: 'container',
            layout: 'border',
            items: [{
                region: 'center',
                xtype: 'container',
                items: [{
                    xtype: 'component',
                    html: 'foo'
                }]
            }]
        }]
    });
    The following markup is generated. The innermost component is not rendered and foo is not visible:

    Code:
    <body class="x-webkit x-chrome x-mac x-reset x-container" id="ext-gen1009" role="application">
        <div id="container-1017" class="x-container x-border-layout-ct" role="presentation">
            <div id="container-1018" class="x-container x-fit-item" role="presentation"></div>
        </div>
        <div class="x-clear" role="presentation" id="ext-gen1015"></div>
    </body>
    If I don't specify the xtypes along the way, the markup is all there, but the heights are set incorrectly, which causes the component to not be visible.

    Code:
    <body class="x-webkit x-chrome x-mac x-reset x-container" id="ext-gen1009" role="application">
        <div id="panel-1017" class="x-panel" role="presentation" style="width: 1702px; height: 4px; ">
            <div class="x-panel-body x-border-layout-ct" id="ext-gen1014" style="left: 0px; top: 0px; ">
                <div id="panel-1018" class="x-panel x-fit-item" role="presentation" style="width: 1700px; height: 2px; ">
                    <div class="x-panel-body" id="ext-gen1018" style="width: 1700px; height: 2px; left: 0px; top: 0px; ">
                        <div id="panel-1019" class="x-panel" role="presentation" style="width: 1698px; height: 16px; ">
                            <div class="x-panel-body" id="ext-gen1020" style="left: 0px; top: 0px; ">foo</div></div>
                            <div class="x-clear" role="presentation" id="ext-gen1023"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="x-clear" role="presentation" id="ext-gen1016">
        </div>
    </body>
    If a layout of fit is specified, the markup is all there and foo is visible:

    Code:
    <body class="x-webkit x-chrome x-mac x-reset x-container x-layout-fit" id="ext-gen1009" role="application">
        <div id="container-1017" class="x-container x-fit-item x-border-layout-ct" role="presentation" style="width: 1702px; height: 635px; ">
            <div id="container-1018" class="x-container x-fit-item" role="presentation" style="width: 1702px; height: 635px; ">
                <div id="component-1019" class="x-component" role="presentation">foo</div>
                <div class="x-clear" role="presentation" id="ext-gen1018"></div>
            </div>
        </div>
    </body>
    Anyway, I would expect the output from the example to be something like:

    Code:
    <body class="x-webkit x-chrome x-mac x-reset x-container" id="ext-gen1009" role="application">
        <div id="container-1017" class="x-container x-border-layout-ct" role="presentation">
            <div id="container-1018" class="x-container x-fit-item" role="presentation">
                <div id="component-1019" class="x-component" role="presentation">foo</div>
                <div class="x-clear" role="presentation" id="ext-gen1018"></div>
            </div>
        </div>
        <div class="x-clear" role="presentation" id="ext-gen1015"></div>
    </body>
    Last edited by wbutler; 31 Mar 2011 at 2:11 PM. Reason: changing a label

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,114
    Vote Rating
    507
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    As you said in your title, you're not using the layouts appropriately.

    Code:
    Ext.require('*');
    Ext.onReady(function(){
        new Ext.container.Viewport({
            layout: 'fit',
            items: [{
                xtype: 'container',
                layout: 'border',
                items: [{
                    region: 'center',
                    xtype: 'container',
                    items: [{
                        xtype: 'component',
                        html: 'foo'
                    }]
                }]
            }]
        });
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member wbutler's Avatar
    Join Date
    Aug 2010
    Posts
    12
    Vote Rating
    0
    wbutler is on a distinguished road

      0  

    Default


    The API doc for Viewport doesn't specify that a layout is required:

    If the layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the default layout manager will be used which does nothing but render child components sequentially into the Container (no sizing or positioning will be performed in this situation).
    I would expect child items to be rendered properly with no sizing or positioning applied. My initial example results in a child item not getting rendered at all. Alternatively, when Panels are used, they appear to be getting sized in an unexpected way (the content getting squished to 0 height).

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,114
    Vote Rating
    507
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Viewport/container/panel, the same thing applies. If you have layouts missing down the chain it's probably going to cause problems.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. [CLOSED]hboxes's containers's height not set properly - 1.0
    By choco in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 29 Nov 2010, 6:50 AM
  2. Height/Layout Issue with Nested Containers (IE)
    By fff398 in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 2 Mar 2010, 1:38 PM
  3. Replies: 1
    Last Post: 13 Nov 2009, 12:22 PM
  4. Replies: 0
    Last Post: 6 Dec 2006, 12:39 PM

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar