auto height for a container with border layout

[dolittle]

Hi,

I'm rendering a container with border layout in a div.
I want the container to get the maximum available height - auto height.
There is no autoHeight settings in extjs 4 and the container should use autoHeight if height is not set.

How do I make it work with border layout?

Ext.define('Myapp.view.Main', {
    extend: 'Ext.container.Container',
    alias: 'widget.myapp.main',
    
    initComponent: function() {
        Ext.apply(this, {
	    renderTo: 'main-wrapper',
            layout: 'border',

            items: [{
                region: 'north',
                height: 50,
                title: 'north'
            }, {
                region: 'west',
                width: 20,
                title: 'nav'
            }, {
                region: 'center',
                width: 800,
                title: 'center'
            }]
        });
        this.callParent(arguments);
    }
});

Thanks

[scottmartin]

Border layout does support 'autoHeight'.

You could use something like the following. Please note that the North Panel in this example uses '%' and is currently not working as expected. Once this is corrected, this should be a working solution:

Ext.define('Myapp.view.Main', {
    extend: 'Ext.panel.Panel', //Ext.container.Container 
    // alias: 'widget.myapp.main', // illegal alias ... no period allowed for xtype
    
    initComponent: function() {
        Ext.apply(this, {
            layout: {
                type: 'vbox', // border vbox
                align: 'left' // default
            },    

            items: [{
                height: 50,
                width: '100%', // does not work in RC3- schedule for GA
                title: 'north'
            }, {
                width: 20,
                title: 'nav'
            }, {
                width: 800,
                title: 'center'
            }]
        });
        this.callParent(arguments);
    }
});


Ext.onReady(function(){

    var mycontainer = Ext.create('Myapp.view.Main', {
        renderTo: 'sencha-div' 
    }); 

    Ext.EventManager.onWindowResize(mycontainer.doLayout, mycontainer);

});

[dolittle]

I'm asking about Ext.layout.BorderLayout:
"multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic bars between regions and built-in expanding and collapsing of regions."

You are suggesting Ext.layout.HBoxLayout
"A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal space between child items containing a numeric flex configuration."

That's not the same thing.

[scottmartin]

You are suggesting Ext.layout.HBoxLayout

Not sure where you saw hbox, but my example is using vbox.
You can add flex to grow with height .. .

Point being .. borderlayout will not support autoHeight.

Regards,
Scott.

[dolittle]

I meant vbox, it's the same thing.
Any reason why borderLayout can't support autoHeight?