谈谈Ext JS的组件——布局的使用方法续一

盒子布局

盒子布局主要作用是以水平（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）

居中布局很简单，就是把子组件全部居中显示。与盒子布局一样，它也是使用绝对定位的方式来实现子组件居中显示的。居中布局典型的应用是显示图片预览时，在容器内居中显示图片组件。与自适应布局一样，容器内一般都是只有一个子组件。如果容器内有多个子组件，所以子组件都会居中显示，不过显示是层叠式的，如下图：

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

未完待续……

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