View Full Version : Vbox layout and maintaining height in border region

16 Aug 2011, 10:47 AM
I'm trying to have the vbox items stay within the layout of the vbox they're in.

Ext.create('Ext.Viewport', {
layout: { type: 'border'},
id: 'rh-vp',
items: [{
region: 'center',
id: 'vp-center',
border: true,
margins: '5 0 5 0',
layout: 'fit',
split: true
region: 'west',
id: 'vp-west',
title: 'Resources',
border: true,
collapsible: true,
margins: '5 0 5 5',
split: true,
width: 300,
layout: { type:'vbox', align:'stretch' },
bindToOwnerCtContainer: true,
bindToOwnerCtComponent: true,
maintainFlex: true,
bodyCls: 'vbox-region',
bodyPadding: '5 5 5 5'
region: 'east',
id: 'vp-east',
border: false,
xtype: 'panel',
margins: '5 5 5 0',
layout: 'fit',
split: true,
width: 370

function tagResources() {
var gridpanel = {
xtype: 'grid',
border: true,
flex: 1,
hideHeaders: true,
closable: true,
loadMask: true,
invalidateScrollerOnRefresh: false,
store: tags_store,
deferEmptyText: false,
emptyText: '<div class="empty-text">No data</div>',
loadingText: 'loading data...'
stateful: false,
title: 'Tags',
{dataIndex: 'tag', text: 'Tag',flex: 1},
{dataIndex: 'tagid', text: 'ID',width: 20, hidden: true}

return gridpanel;

function splitBar() {
return new Ext.resizer.Splitter({
collapsible: true


If I used maintainFlex, it works great if I resize either the top or the bottom with the splitter. If I resize both the top and bottom and then resize the browser, the height of the vbox items are now incorrect (i.e. either too short or overflowing the region depending on browser height). I've tried doComponentLayout() and doLayout on the region.

Is there something I can use to recalculate the heights for the items in the vbox? Or am I going to have to write my own height managing code for these. I would think there would be something, but I can't seem to find it.

5 Jan 2012, 5:21 PM
Bump? Still an issue...