Javascript 嵌套容器的流布局

在我的ExtJS6应用程序中，我试图创建一个包含3个容器的流布局，中间的容器包含需要继续流布局的嵌套项。如果我直接添加中间容器的项目，我可以让它工作，但我不想这样做。。。我希望他们分开

这是一个：

因此，我的流程布局应该如下所示（在示例的第二个面板中描述）：

我从中得到了这个想法，但它没有像我的示例中那样的嵌套项。也试着使用建议，但仍然没有骰子

我认为问题在于中间容器的自动布局，因为它将其子div的宽度设置为100%，但我不确定如何解决这个问题。。。有什么建议吗

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            height: 300,
            width: 300,
            scrollable: true,
            renderTo: Ext.getBody(),
            title: 'Not properly working',
            bodyPadding: 10,
            layout: {
                type: 'column'
            },
            items: [{
                xtype: 'panel',
                title: 'start',
                width: 100,
                height: 50
            }, {
                xtype: 'container',
                defaults: {
                    xtype: 'panel',
                    title: '1',
                    width: 50,
                    height: 50,
                    style: 'float: left;'
                },
                items: [{}, {}, {}, {}, {}, {}]
            }, {
                xtype: 'panel',
                title: 'end',
                width: 100,
                height: 50
            }]
        });
        Ext.create('Ext.panel.Panel', {
            height: 300,
            width: 300,
            scrollable: true,
            renderTo: Ext.getBody(),
            bodyPadding: 10,
            title: 'This is how it should look',
            layout: {
                type: 'column'
            },
            items: [{
                xtype: 'panel',
                title: 'start',
                width: 100,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: '1',
                width: 50,
                height: 50
            }, {
                xtype: 'panel',
                title: 'end',
                width: 100,
                height: 50
            }]
        });
    }
});

start 1 1 1 (newline)
1 1 1 end