extjs中的vbox和hbox

Question

我想在extjs中使这个结构使用容器的hbox和vbox布局嵌套。我成功地使用了周边组件，但是我无法正确地拉伸中心的容器。我做错了什么？

这是图片：

我尝试为中心网格创建像这样的容器

var innerContainer = Ext.create('Ext.container.Container', {

    layout:vbox,

    items:[{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    },{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    },{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    },{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    }]
});

我得到的问题是我无法将内部容器拉伸到innerContainer的完整大小。

我可以用空容器实现这一点而不设置宽度属性吗？

或者我应该使用不同的策略来实现我的目标？

Answer 1

如果您希望布局能够满足以下需求：

layout: {
   type: 'vbox',
   align: 'stretch'
}

你的第一个容器也有一个布局：vbox需要是上面的。

编辑：我为你做了一个小提琴： http://jsfiddle.net/Jgpgy/

我使用了面板而不是容器，因此您有一个可视化结果，您可以将其更改回容器并删除title属性。