javascript - 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
        }]
    }]
});

我遇到的问题是我无法将内部容器拉伸到内部容器的全尺寸。

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

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

Answer 1

如果您希望布局扩展您的需求，请使用以下内容：

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

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

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

我使用面板而不是容器，因此您可以获得视觉效果，您只需将其更改回容器并删除标题属性即可。