Ext js 7 modern resizable panels

Question

I'm trien to make a resizable panel layout. I've made a fiddle:

https://fiddle.sencha.com/#view/editor&fiddle/3c94

Why can't I use the resizer between test1 and test2 while the resizer between test3 and test4 is working.

I tried adding flex/fit to a few container, tried removing unimportant stuff, can't find a solution.

Answer 1

Because you have used fit layout in the first panel and hbox (it works) in the second one:

Ext.create('Ext.form.Panel', {
    xtype: 'main_customer',
    itemId: 'main_customer',
    renderTo: Ext.getBody(),

    flex: 1,
    items: [{
        xtype: 'panel',
        itemId: 'maincontainer',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'panel',
            padding: 0,
            scrollable: true,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            flex: 1,
            height: '63%',
            resizable: {
                split: true,
                edges: ['south']
            },
            items: [{
                xtype: 'panel',
                resizable: {
                    split: true,
                    edges: ['east'],
                },
                items: [{
                    xtype: 'panel',
                    html: 'test 1',
                }]
            }, {
                xtype: 'panel',
                html: 'test 2',
            }]
        }, {
            xtype: 'panel',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            flex: 1,
            items: [{
                xtype: 'panel',
                width: '50%',
                resizable: {
                    split: true,
                    edges: 'east'
                },
                html: 'test 3',
            }, {
                xtype: 'panel',
                html: 'test 4',
            }]
        }]
    }],
    collapsible: false
});