箱子布局攻略 (HBox/VBox Layout)

一、了解箱子布局

箱子布局是一种新颖的布局方式，其布局模型可以更好地优化UI设计的工作。它率先在 XUL 界面语言中被提出，广泛应用于 Mozilla 的应用程序，如 FireFox 等等。在 CSS 布局系统中（for CSS v3），作为新增的补充形式，箱子布局可以指定子元素在水平或垂直的任意一种方向进行排列，剩下有多的空间由已声明了的子元素来填空（声明 flex 项）。

我们知道，在 Ext JS 中，容器里面是用来放置组件的，至于容器内的子组件怎么排列就由布局风格来指定。3.0 提供了新的基于箱子模型的布局方式，分别是 Hbox 和 Vbox，对应的命名空间是 Ext.layout.HBoxLayout 和 Ext.layout.VBoxLayout。HBox 全称 Horizontal Box，其中所有子项都是自动按顺序横排。VBox 则相反，全称 Vertical Box，里面为竖排方式。所谓箱子模型的意思，就是将显示部分分割成一系列的 box，按照水平的或垂直的两种方位排列组织。水平 box 可以将其子组件排成一条线，而垂直 box  可以将其子组件定位成垂直方向。如果既然要水平方向和垂直方向两个方向填充内容，我们可以相互内嵌布局，即水平布局内嵌垂直布局，或垂直布局内嵌水平布局。

透过下图的一个例子可以看到两种方向的不同。

箱子模型的理论其实很人性化，既可以支持固定值尺寸的子项内容，也可以支持自适应的子项。箱子布局中的元素可以分配一个固定的值，也有可能加大尺码，这是容器空间有余的情况；另一种情况，则是容器空间不够容纳元素，就缩小某个元素的尺寸以适应。作用在那个元素身上？有 flex 配置项的子项元素，也就是说，HBox/VBox 布局会把有设定 flex 配置的子项划分垂直或水平的空间。另外，容器中元素的位置和顺序也会某程度地改变。

二、API攻略

a.flex 配置项

flex 配置项不是设置在布局上，而是设置在子项的配置项。每个子项相对的 flex 值都会与全体子项 flex 累加的值相比较，根据此结果，处理每个子项的 flex 最后是多少。若不设置子项的 flex，表示不对子项作自适应尺寸的处理，相当于 flex = 0 的子项或 flex = undefined 的时候，表示子项不会自伸缩处理，而采用最初的尺寸。

如下例：

{
layoutConfig: {
padding:'5',
align:'top'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1',
flex:1
},{
xtype:'button',
text: 'Button 2',
flex:1
},{
xtype:'button',
text: 'Button 3',
flex:1
},{
xtype:'button',
text: 'Button 4',
flex:3,
margins:'0'
}]
}

该配置项效果如下图：

如果子项都设置相同 flex 值，那就意味着全体子项作相同的处理。

技巧：我们可以只让一个 panel 设定 flex，便可以作为填充空白的 spacer：

{
layoutConfig: {
padding:'5',
align:'top'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'spacer',
flex:1
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4',
margins:'0'
}]
} 效果如下：

flex 的文档也不是说得太清楚，不过我们可以多参考官方例子是怎么使用 flex 的。一旦你明白了flex 这个概念之后，它会非常灵活地进行布局。

b.如何对齐 align & pack

当然我们可以 Vbox 布局中内嵌 hbox 布局，或者 hbox 中内嵌 vbox，HBox 和 VBox 之间是可以允许嵌套布局的，但实际不必如此手动去做， Ext JS 为我们提供了“对齐 align/pack”的这一对方向各异的调整配置，代替了上述“内嵌”的这一种稍微让人感觉别扭。容器中每一个子项都遵循用户指定的 align/pack 对齐方式。一般设置的地方是在容器的 layoutConfig 配置项对象中，如下面某一个容器的代码片断：

layout:'hbox',
layoutConfig: {
align : 'stretch',
pack : 'start',
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', width:150},
{html:'panel 3', flex:2}
]

对于垂直布局的 VBox 而言，属性 align 就是水平对齐的设置了，align 有以下可选项：

属性 pack 是控制容器里面的子项是如何停靠的，这是垂直方向本身的对齐。有如以下设置：

对于水平布局的 HBox 而言，align 就是决定如何垂直对齐，align 的可选项有如下：

pack的可选项有以下几种：

对于 top、middle/center 我们能够一眼地看出是什么意思，而 stretch/stretchmax 又是什么用法呢？一图胜千言，我们看看下面这张图（点击图片运行例子以了解更多的适用情形）：

c.设置内外边距

BoxLayout 可设置外边距（margins）。关于 defaultMargins，就是如果不制定每个子项的 margins 属性，那么就会使用默认的 margins。规定 defaultMargins 的格式如下：

{
top: (top margin),
right: (right margin),
bottom: (bottom margin),
left: (left margin)
}

默认为 {top:0, right:0, bottom:0, left:0} 。margin 属性接纳的格式也可以是字符串的，规定为空格隔开，数字类型的 margin 值。各个方向的排列顺序为 CSS 的顺序：

• 如果只是一个值，就是各个方向都是这个值。
• 如果有两个值，那么第一个值代表是上下方向的值，第二值则是左右方向的值。
• 如果有三个值，第一个值是顶部的值，第二个值是左右两边的值，第三个值是底部的值。
• 如果有四个值，分别代表就是顶部、右边、底部和左边的值（为方便记忆，可理解为顺时针方向）。

BoxLayout 可设置内边距（padding）。跟 defaultMargins 差不多，padding 属性接纳的格式也可以是字符串的，其格式规定为空格隔开，数字类型的 margin 值。各个方向的排列顺序为 CSS 的顺序。

三、小结

需要说明的是，H & V 箱子模型只限特定的应用场合使用，不是在任何布局都可适应。例如，H & V BoxLayout 就不支持渲染表单的 fieldLabels。要解决此问题，可以为 fieldLables 增加一层 layout:'form' 的容器。尽管理论上可设计一个满足多样需求的布局，但性能会是一大障碍（可参阅 http: //www.extjs.com/forum/showthread.php?p=396565#post396565）。也可以使用其他的布局风格，如 TableLayout 代替，但 TableLayout 一个明显的不足是其子项的增、删、改都不太方便；再如浮动布局 FloatLayout，FloatLayout 很像水平布局的 HBoxLayout，支持 x/y 的绝对布局，不过就没有自适应大小的功能。如果没有大小尺寸不够放得下，就换行显示。FloatLayout 同样有拉伸子项的功能，也支持 top/bottom/middle 对齐，以及居中、居左、居右的功能。

可见，H & V BoxLayout 越来越备受推崇，必须把它弄懂才行。学习游泳最好的方法就是跳进水里大胆试试，把上面的例子和官方源码当作你的湖吧！

四、延伸阅读：

• 运行布局浏览器
• W3C 的Flexible Box文档
• VBox/HBox 汉化文档
• Grid 如何高/宽自适应
• Flex 布局没有滚动条？