PDA

View Full Version : auto height for a container with border layout



dolittle
13 Apr 2012, 9:21 AM
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
13 Apr 2012, 11:26 AM
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
13 Apr 2012, 2:01 PM
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
13 Apr 2012, 2:08 PM
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
13 Apr 2012, 3:10 PM
I meant vbox, it's the same thing.
Any reason why borderLayout can't support autoHeight?