View Full Version : Height in vbox layouts

24 Sep 2013, 1:01 AM
I have a container with an vbox layout and set all the children to a height of 600, but somehow they still get flexed.

Layout is vbox with align set to stretch and overflowX and overflowY set to auto.

7 children; 3 Splitters and 4 containers.

The containers all have height 600 and no flex when I look at them in the console.

24 Sep 2013, 1:18 AM
what is the height of the parent container? if it doesnt have a fixed height, then it will expand according to its child containers heights sum. If however, you define a fixed height on the parent, then you can see that the parent shows scrollbars when the sum of child container's heights exceeds its own height:

Ext.create('Ext.panel.Panel', {
width: 300,
height: 400,
layout: { type: 'vbox', align: 'stretch'},
title: 'Parent',
overflowY: 'auto',
items: [{
xtype: 'panel',
height: 300,
title: 'ChildA'
}, {
xtype: 'panel',
height: 300,
title: 'ChildB'
renderTo: Ext.getBody()

24 Sep 2013, 1:45 AM
My main container layout:

align: "stretch"
beginCount: 0
blockCount: 0
calcCount: 3
done: true
firedTriggers: 5
flexSortFn: function (){return d.apply(c,arguments)}
id: "vbox-1199"
initialized: true
innerCt: A
lastHeightModel: A
lastWidthModel: A
layoutCount: 1
overflowHandler: A
overflowPadderEl: null
owner: j
ownerContext: null
padding: Object
pending: false
running: false
scrollParallel: true
scrollPerpendicular: true
scrollPos: 0
targetEl: A
triggerCount: 5
type: "vbox"

My first item:

activeUI: "default"
autoGenId: true
border: 0
componentCls: "x-container"
componentLayout: A
componentLayoutCounter: 2
container: A
el: A
events: Object
floatingItems: A
frame: undefined
getController: function (){return b}
hasListeners: statics.prepareClass.l
height: 600

Green is the container, orange is the first item.


24 Sep 2013, 2:12 AM
Ah, got it.

I had a flex in the class definition of the first item and the container used this instead of the height of the config.