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?