Resizing child items of vbox

Resizing child items of vbox

We recently updated our ext-js from 4.1 to 4.2. On 4.1 following code made
it possible to resize child items of vbox used here. We could drag border
between those children, and both items would resize.
In 4.2 there is no way to resize those children. Not even cursor changes
the shape when pointing at correct space.
Ext.define('Example.view.NavPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.exampleNavPanel',
requires: ['Example.view.example.List', 'Example.view.example2.List',
'Example.view.paneledycji.EditTabPanel'],
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
items: [
{
xtype: 'panel',
title: 'Navpanel',
collapsible: true,
flex: 1,
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{xtype: 'exampleList', flex: 1},
{xtype: 'example2List', flex: 3}
]
},
{
xtype: 'editTabPanel',
flex: 1
}
]
});
I tried adding
resizable:true
to first child. It made the cursor change shape when pointing at the
border, and I could drag it around... but the children wouldn't resize.
When I removed flex from first child I finally could resize the items, but
it had few problems:
I could resize first item both in height and width, I want only height,
and it's how it worked in 4.1
the vbox would give as much space as needed for first child, and if first
child was too big 2nd child wasn't even in the window, making it
impossible to see, or to resize first child, as the border was offscreen
setting minHeight on either child had completely no effect
I want to be able to set minimum and maximum height for upper child,
ideally in percentage, and disable width resizing. Ideally I would also
like to be able to set default sizes for both children. I can't work it
out using any combinations of configs listed at docs.sencha.com. What do I
have to do to accomplish this effect?