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

**wbutler** · 31 Mar 2011 1:48 PM

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>

**evant** · 31 Mar 2011 4:11 PM

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'
                }]
            }]
        }]
    });
});

**wbutler** · 31 Mar 2011 5:54 PM

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).

**evant** · 31 Mar 2011 5:58 PM

Viewport/container/panel, the same thing applies. If you have layouts missing down the chain it's probably going to cause problems.

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

Thread Tools

Search Thread

Display

[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

Similar Threads

[CLOSED]hboxes's containers's height not set properly - 1.0

Height/Layout Issue with Nested Containers (IE)

[CLOSED-350]CheckboxGroup creates nested Panels instead of nested Containers.

Autohide functionality not working properly in Nested Layout

Tags for this Thread