Question

在我的Ext JS 6应用程序中，我正在尝试使用3个容器创建流布局，中间容器具有需要继续流布局的嵌套项。如果我直接添加中间容器的项目，我可以使用它，但我不想这样做...我希望它们是分开的。

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

我从this thread得到了这个想法，但是没有像我的例子那样的嵌套项目。也尝试使用this thread's建议，但仍然没有骰子。

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

具有嵌套容器的流布局

0 个答案: