How to constrain resizable items in container with hbox layout?

[Bartholomew]

Let's say I have two items inside a container with a hbox layout. The first (left) item is resizable to the right and the second (right) item has a min width set. Unfortunately, it is possible to resize the the first item until the it's resize handle and the second item are outside of their parent container.

Is there a way to constrain the items inside their container? I already tried constrainAlign, manageOverflow and shrinkWrap. But to be honest, I don't really know where to put them. Thanks in advance.

Ext.create('Ext.Panel', {
    width: 500,
    height: 300,
    title: "HBoxLayout Panel",
    layout: {
        type: 'hbox',
        align: 'stretch',
        pack: 'start'
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        width: 100,
        resizable: {
            handles: 'e'
        }
    },{
        xtype: 'panel',
        title: 'Inner Panel Two',
        minWidth: 100,
        flex: 1
    }]
}); 

[mitchellsimoens]

Could try using border layout instead. It will stop the resize.

[Bartholomew]

Sadly, the border layout doesn't work in my particular case. Does your reply mean, that currently there is no way to do it using the hbox layout?

[Bartholomew]

Okay, I found out using a splitter will fix this problem, but inserts another item which kind of messes up my code. Is there any other way without inserting extra items?

Example with splitter item:

Ext.create('Ext.Panel', {
    width: 500,
    height: 300,
    title: "HBoxLayout Panel",
    layout: {
        type: 'hbox',
        align: 'stretch',
        pack: 'start'
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        width: 100
    },{
        xtype: 'splitter',
    },{
        xtype: 'panel',
        title: 'Inner Panel Two',
        minWidth: 100,
        flex: 1
    }]
});