Resizing a dynamic loaded HTML Container to center viewport

[ferdhie]

Hi,

I currently having problem with using a component loader to load external page inside a Viewport, the problem is that the loaded component cannot be resized to fit the content height, so it left a hole in the bottom,

If i use non border layout, the form and the grid cannot be resized

here's the code details:

Main Page

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [
            {
                region: 'north',
                autoHeight: true,
                border: false,
                margins: '0 0 5 0',
                applyTo: 'header'
            },{
                region: 'west',
                collapsible: false,
                title: 'Navigation',
                width: 200,
                autoScroll: true,
                split: true,
                contentEl:'menu'
            },{
                region: 'center',
                id: 'mainPanel'
            }
        ]
    });
    
    var links = Ext.query('.menulink');
    for(var i=0,len=links.length; i<len; i++) {
        var link = Ext.get(links[i]);
        link.on('click', function(evt) {
            var href = this.dom.href;
            var panel = Ext.create('Ext.Component',{
                    loader: {
                        url: href,
                        autoLoad: true,
                        scripts: true,
                        renderer: 'html',
                        failure: function() {
                            Ext.Msg.alert('Error, loading page failed');
                        }
                    }
                });
                    
                var mainPanel = Ext.getCmp('mainPanel');
                mainPanel.removeAll();
                mainPanel.update('');
                mainPanel.add(panel);
                
                evt.preventDefault();
        });
    }
});

And the page is an HTML document, plus some ExtJS component on the child page

<h1>My Child Pages</h1>
<div id="content"></div>
<script type="text/javascript">
    var grid = ...

   var form = ...

    Ext.create('Ext.container.Container', {
        layout:'border',
        height: 700, // this cannot be auto height
        defaults:{split:true},
        items: [grid, form],
        renderTo: Ext.get('content')
    });


</script>

[mitchellsimoens]

That's because you are rendering that Container into a <div> so the center region in the viewport won't be able to size it.

[ferdhie]

If I change the child into Viewport or render to body, the child don't get loaded and only flickering for a while.

[ferdhie]

Okay, found the solution, I set the

<div>

height into 100% using CSS and then problem solved.

Thanks