Resizable panels side by side inside hbox layout

I use Ext 3.4.1.1

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

I have two simple panels inside hbox layout. I want both of them to be resizable (so both are resized at the same time when on or the other is resized, hence they are side by side).

Resizable panel looks like this:

{
                        xtype: 'panel',
                        title: 'Navigation',
                        flex: 2,
                        resizable: true,
                        hidden: false,
                        listeners: {
                            render: function (p) {
                                new Ext.Resizable(p.getEl(), {
                                    handles: 'all',
                                    pinned: true,
                                    transparent: false,
                                    resizeElement: function () {
                                        var box = this.proxy.getBox();
                                        p.updateBox(box);
                                        if (p.layout) {
                                            p.doLayout();
                                        }
                                        return box;
                                    }
                                });
                            }
                        }
                    }

Here comes the problem - adding Ext.Resizable to both of them makes second panel become invisible, it disappears from the form. If I leave Ext.Resizable only on one panel, then both are visible, but they can not be resized at the same time (only one is resizable and overlapps with another). I can use some other layout (then they are both visible) than hbox, but then I have the problem how to stretch both forms 100% and put them side by side.

Is it possible to make both panels resizable inside hbox layout?

You can do this with border layout. See this code and try to run it in Fiddle:

Ext.onReady(function () {
    var p1 = new Ext.Container({
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'panel',
            height: 600,
            title: 'First panel',
            layout: {
                type: 'border',
            },
            items: [{
                title: 'Navigation',
                region: 'west',
                split: true,
                width: '20%',
                layout: 'fit',
                style: 'border: 0px solid black;',
                items: [{
                    xtype: 'container',
                    items: [{
                        xtype: 'component',
                        html: 'navigation content'
                    }]
                }]
            }, {
                title: 'Data',
                region: 'center',
                layout: {
                    type: 'vbox',
                    pack: 'center',
                    align: 'center'
                },
                width: '80%',
                style: 'border: 0px solid black;',
                items: [{
                    xtype: 'container',
                    items: [{
                        xtype: 'component',
                        html: 'data content'
                    }]
                }]
            }]
        }]
    });
});

You can also add an east region content, make these collapsible etc. , check the documentation.

EDIT 1: It is possible to add another border layout panel inside the center or other regions to have more than 3 areas. It is not a perfect solution and the config minWidth has to be used to have enough space for the nested panel.

Ext.onReady(function () {
    var p1 = new Ext.Container({
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'panel',
            height: 600,
            title: 'Panel',
            layout: {
                type: 'border',
            },
            items: [{
                title: 'First',
                region: 'west',
                split: true,
                width: '20%',
            }, {
                region: 'center',
                minWidth: 200,
                width: '50%',
                layout: 'fit',
                items: [{
                    xtype: 'panel',
                    border: false,
                    layout: {
                        type: 'border',
                    },
                    items: [{
                        title: 'Second',
                        region: 'west',
                        split: true,
                        width: '20%',
                    }, {
                        title: 'Third',
                        region: 'center',
                        width: '60%',
                    }, {
                        title: 'Fourth',
                        region: 'east',
                        split: true,
                        width: '20%',
                    }]
                }]
            }, {
                title: 'Fifth',
                region: 'east',
                split: true,
                width: '30%',
            }]
        }]
    });
});