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属性.