javascript extjs 中的 vbox 和 hbox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12634556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vbox and hbox in extjs
提问by Vlad
I want to make this structure in extjs usign nesting of hbox and vbox layout for the containers. I succeeded with the periferal components but I cannot stretch properly the containers in the center. What do i do wrong?
我想在 extjs 中使用容器的 hbox 和 vbox 布局嵌套来制作这个结构。我成功地使用了外围组件，但我无法正确拉伸中心的容器。我做错了什么？
Here is the image:
这是图像：
I tried creating container like this, for the center grid
我尝试为中心网格创建这样的容器
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
}]
}]
});
The problem I get is I cannot stretch the inside containers to the full size of the innerContainer.
我遇到的问题是我无法将内部容器拉伸到innerContainer 的全尺寸。
Can I achieve this with empty container and without setting width property?
我可以使用空容器而不设置宽度属性来实现这一点吗？
Or should I use different strategy to acomplish my goal?
或者我应该使用不同的策略来实现我的目标？
回答by Johan Haest
If you want your layout to stretch your need to use the following:
如果您希望您的布局扩展您的需要，请使用以下内容：
layout: {
type: 'vbox',
align: 'stretch'
}
Also your first container has a layout: vbox needs to be the above.
你的第一个容器也有一个布局： vbox 需要是上面的。
Edit: I've made a fiddle for you: http://jsfiddle.net/Jgpgy/
编辑：我为你做了一个小提琴：http: //jsfiddle.net/Jgpgy/
I used panels instead of containers so you have a visual result, you can just change that back into containers and remove the title attribute.
我使用面板而不是容器，所以你有一个视觉结果，你可以把它改回容器并删除标题属性。
