extjs箱子布局-创新互联

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'  
    }]  
}

 当然我们可以 Vbox 布局中内嵌 hbox 布局，或者 hbox 中内嵌 vbox，HBox 和 VBox 之间是可以允许嵌套布局的，但实际不必如此手动去做， Ext 为我们提供了“对齐 align/pack”的这一对方向各异的调整配置，

代替了上述“内嵌”的这一种稍微让人感觉别扭。容器中每一个子项都遵循用户指定的 align/pack 对齐方式。一般设置的地方是在容器的 layoutConfig 配置项对象中，如下面某一个容器的代码片断：

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

键值 作用
left 居左，从容器的 left开始水平对齐。这是系统默认的选项。
center 居中，从容器的mid-width开始垂直对齐。
stretcn 拉伸子项以填充容器的水平宽度。
stretcnmax 拿最宽的那个子项拉伸，适应容器的水平宽度。
属性pack是控制容器里面的子项是如何停靠的，这是垂直方向本身的对齐。有如以下设置：

键值 作用
start 居顶，从容器的top停靠子项。这是系统默认的选项。
center 居中，也就是子项都从容器的mid-height上开始停靠。
end 居底，从容器的底部边边开始往上摆子组件。
对于水平布局的HBox而言，align就是决定如何垂直对齐，align的可选项有如下：

键值 作用
top 顶部对齐，从容器的top开始垂直对齐。
middle 居中对齐，从容器的middle开始垂直对齐。
stretch 拉伸子项以填充容器的垂直高度。
stretchmax 拿高的那个子项拉伸，适应容器的垂直高度。
pack的可选项有以下几种：

键值 作用
start 居左，从左边开始排列内容。
center 居中，也就是从容器的mid-width开始停靠内容。
end 居右，从容器的右边开始停靠内容。

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

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

如果只是一个值，就是各个方向都是这个值。
如果有两个值，那么第一个值代表是上下方向的值，第二值则是左右方向的值。
如果有三个值，第一个值是顶部的值，第二个值是左右两边的值，第三个值是底部的值。
如果有四个值，分别代表就是顶部、右边、底部和左边的值（为方便记忆，可理解为顺时针方向）。
BoxLayout 可设置内边距（padding）。跟 defaultMargins 差不多，padding 属性接纳的格式也可以是字符串的，其格式规定为空格隔开，数字类型的 margin 值。各个方向的排列顺序为 CSS 的顺序。