盒子布局

盒子布局主要作用是以水平（Ext.layout.container.HBox）或垂直方式（Ext.layout.container.VBox）来划分容器区域。这也是比較常有的布局方式。

使用盒子布局，除了要在容器定义layout配置项外，还须要在子组件指定子组件的宽度（HBox）或高度（VBox）。指定宽度或高度有两种方式。一是直接使用width或height来定义，一是使用flex配置项，依据比例来划分。以下通过一些演示样例来了解一下盒子布局的使用，这里仅仅使用水平盒子作为演示样例，垂直盒子就不演示了。

在页面执行以下代码创建一个400×200的容器。然后使用水平盒子布局加入三个大小分别为50×50、100×100和150×150的面板：

Ext.create(‘Ext.container.Container‘,{
    renderTo: Ext.getBody(),
    width:400,
    height:200,
    border: 5,
    style:{
        borderColor:‘yellow‘,
        borderStyle: ‘solid‘
    },
    layout:{
        type:‘hbox‘
    },
    defaults:{
        bodyStyle:{
            borderColor: ‘red‘
        }
    },
    items:[
        {html:‘50×50‘, width:50, height:50},
        {html: ‘100×100‘, width:100, height:100},
        {html: ‘150×150‘, width:150, height:150}
    ]
});

为了加强演示效果。特意将容器的边框设置为5像素，且以黄色实线显示，而面板的边框也使用红色实线来显示，终于的显示效果例如以下：

从效果图中能够看到。因为子组件的总宽度不能填满容器的宽度， 因而留了非常大一块空白，要预防这样的情况，就要使用flex配置项，比如，将150×150的面板的“width:150”改动为“flex:1”就能够让子组件填满余下的空白了。

改动后的宽度计算规则是先用容器的宽度减去所有固定宽度的子组件的总宽度。再把余下的宽度依据flex设置的比例分配，因为这里仅仅有一个flex。因而会把所有余下宽度所有分配给150×150的面板。

假设不清楚该设置多少宽度给子组件，最好的方式就是使用flex，通过比例划分的方式来分配宽度。

比例划分的计算规则是，先把所以子组件的flex配置项相加作为分母，把各子组件的flex设置作为分子，计算出比例后再乘于容器的宽度就是子组件的宽度。

比如，将演示样例中的三个子组件的flex依次设置为1、2、4，那各子组件的宽度将依次为总宽度的1/7、2/7和4/7。使用除法，不可避免的要对计算值进行取整。这样，取整后的总宽度就有可能不是容器的总宽度，因而。在最后都会调整最后一个子组件的宽度以便所有子组件的宽度等于总宽度。

在效果图中，你会发现假设各个子面板的高度都不同。就会出现这样的不太美观的效果，当然，有时候可能须要这样的效果，但总的来说还是高度统一为容器的高度较美观。假设要让高度统一为容器高度，能够在layout的配置对象内将align配置项定义为stretch。代码例如以下：

layout:{
    type:‘hbox‘,
    align:‘stretch‘
},

对于align配置项来说。还有其它对齐方式可选：

• begin：假设是水平盒子布局。则是顶部对齐，假设是垂直盒子布局，则左对齐。
• middle：假设是水平盒子布局。则是垂直居中对齐，假设是垂直盒子布局，则是水平居中对齐。

• end：假设是水平盒子布局，则是底部对齐。假设是垂直盒子布局。则是右对齐。

• stretchmax：假设是水平盒子布局，则对齐高度最高的那个子组件。假设是垂直盒子布局，则对齐宽度最宽的那个子组件。

拆分条

在盒子布局中也是能够使用拆分条的。只是它使用的组件与边框布局不同。它使用的是Ext.resizer.Splitter组件。要在盒子布局设置拆分条，与边框布局的使用方法是一样的。要注意的是，水平盒子布局的拆分条是固定绑定在子组件的左边的。而垂直盒子布局的拆分条是固定绑定在组件的顶部的，总的来说，不管是水平盒子布局还是垂直盒子布局。在第一个子组件设置拆分条是没有效果的。

装箱

假设确实须要效果图中的效果。但希望所有子组件居中显示。能够在layout的配置对象中将pack配置项设置为center，代码例如以下：

layout:{
    type:‘hbox‘,
    pack: ‘center‘
},

这样，效果图中的三个子组件就会水平居中显示了。假设要右对齐（水平盒子布局）或底部对齐（垂直盒子布局），可将pack的值设置为end。pack的默认值为start，也就是效果图中的效果。

自适应布局（Ext.layout.container.Fit）

自适应布局就是把子组件的尺寸设置为容器的尺寸。全然填满容器的可视空间，这是一种常有比較。也比較简单，仅仅要把layout的类型设置为fit即可了。

普通情况下，仅仅有在容器仅仅有一个子组件的情况下才适合使用自适应布局，不然，当有多个子组件时，就会每个子组件都会和容器的尺寸一样，显示就会出问题。

这时候，应该使用盒子布局或者卡片布局。

卡片布局（Ext.layout.container.Card）

卡片布局与自适应布局一样，都会把子组件的尺寸设置未容器的尺寸，不同之处在于。它能够拥有多个子组件，但每次仅仅显示当中一个。为了能对子组件进行切换。特意在布局中加入了getNext、getPrev、next、prev和setActiveItem等方法。要调用这些方法，须要先调用容器的getLayout方法返回布局对象，再调用它的方法。

居中布局（Ext.layout.container.Center）

居中布局非常easy，就是把子组件所有居中显示。与盒子布局一样。它也是使用绝对定位的方式来实现子组件居中显示的。

居中布局典型的应用是显示图片预览时。在容器内居中显示图片组件。

与自适应布局一样。容器内一般都是仅仅有一个子组件。

假设容器内有多个子组件，所以子组件都会居中显示，只是显示是层叠式的，例如以下图：

上图的效果仅仅是把上面演示样例中的布局改动未居中布局，把尺寸大的子组件作为第一个子组件。把尺寸最小的子组件作为最后一个子组件。从图中的效果能够看到，居中布局会依子组件的定义次序来层叠子组件，也就是最后一个渲染的子组件会显示在最前面。

未完待续……

请大家尊重作者的辛勤劳动，未经同意。请不要转载本文，毕竟读者的支持是作者撰写文章的动力。