Resizing child items of vbox

Question

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?

Answer 1

You can remove the flex attribute after the initial layout using the boxready event. This way, you benefit from the initial auto sizing, but it won't prevent the component from being resized later.

For your second issue, use the resizeHandles option to specify the sides that can be grabbed for resizing.

Ext.define('Example.view.NavPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.exampleNavPanel',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'panel',
        title: 'Navpanel',

        flex: 1,

        resizable: true,
        resizeHandles: 's',

        listeners: {
            single: true,
            boxready: function() {
                delete this.flex;
            }
        }
    },{
        xtype: 'component',
        html: 'editTabPanel',
        flex: 1
    }]
});