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

绝对布局（Ext.layout.container.Absolute）

绝对布局让我回想到了使用Foxpro开发的时候，哪时候的界面布局就是这样，通过设置控件的左上角坐标（x，y）和宽度来进行的，因为输入控件的高度基本是固定的，所以不需要设置。在可视化编程没有出现之前，开发界面算是个苦差事，因为布局是需要花费不少功夫的，例如想要在已经定义好的组件中插入一个组件，那就得重新修改插入位置以下的组件的坐标，这工作是比较枯燥无聊的，因而，在没必要的情况下，还是少选择这种布局模式。

绝对布局是使用CSS的绝对定位（absolute）实现的，因而在使用的时候需要定义子组件的左上角坐标、宽度和高度。在CSS中，绝对定义是使用left和top来定义左上角坐标的，而在Ext JS中，则转换为习惯的x、y来代替。宽度和高度可以分别使用width和height来定义，也可以是anchor来定义。使用anchor的好处是子组件会根据容器的尺寸变化来调整子组件的尺寸，从而保证不会在容器变小的时候，只能显示部分子组件，而在容器大了的时候，显示一片的空白区域。

使用anchor来定义宽度和高度也有三种方式，一种是使用百分比来定义，如“90% 95%”，这里表示的是子组件的宽度是容器宽度的90%，高度为容器高度的95%，一种是使用偏移量，如“-20 -5”,这里表示的是子组件的右边界将便宜容器的右边界-20像素，也就是两个边界相距20个像素，而-5则表示子组件的底部边界与容器的边界相距5个像素。如果你使用正值，那子组件的显示就会超出容器，一般绝少这样设置。最后一种方式就是混合以上两种方式的方式，也就是宽度用百分比，高度使用偏移量，或宽度使用偏移量，而高度使用百分比。如果子组件的高度是固定的，以上三种方式也可只设置一个值，也就是只设置子组件的宽度。

锚布局（Ext.layout.container.Anchor）

锚布局是表单面板的默认模板，因而是一种常有的布局，它的好处就是子组件可根据容器尺寸的变化而调整。在表单面板中使用anchor布局，就可避免在表单面板变小后，输入组件的长度会超出表单面板的访问，而变大的时候则不会留下一片空白。

要使用锚布局，除了要在容器中将layout定义为“anchor”，还需要在子组件中使用anchor配置项来定义子组件的高度和宽度。配置项anchor的使用方法与绝对布局中的anchor配置项的使用方法是一样的，这里就不再赘述了。

列布局（Ext.layout.container.Column）

在Ext JS 2没有水平盒子布局的时候，只能使用列布局进行列的划分，自从有了水平盒子布局，就很少使用列布局了。不过，咸鱼白菜各有喜好，能实现所需效果才是最终目的。

要使用列布局，除了要在容器中将layout定义为“column”，还需要在子组件中定义宽度。宽度的定义方式有两种，一是直接使用width来定义，这种方式不要的地方是宽度固定，不能随容器的变化而进行调整；第二张方式是使用columnWidth，通过设置百分比（值用小数来表示）来设置列宽，这种方式的好处就是列宽可随容器大小的变化调整列宽。

手风琴布局（Ext.layout.container.Accordion）

手风琴也是一种常有的布局。它派生于垂直盒子布局，在原理上其实也差不多，把容器垂直划分为几个区域，只有一个区域是展开来显示标题和内容的，其他区域都是折叠只显示标题的。当然，手风琴布局也可以同时显示多个展开区域，这个要在layout的配置对象中将multi配置项设置为true。

由于手风琴布局需要显示标题，而它自己不会去创建一个这样的标题，只使用容器类的标题，因而，在使用手风琴布局的时候，子组件必须选择是带有标题且能折叠的容器类，如面板、表单面板、树面板等。

使用手风琴布局，只需要在容器中将layout定义为“accordion”就行了。如果喜欢活动面板始终位于容器定义，可在layout的配置对象中设置activeOnTop为true。默认情况下，面板的折叠只能通过单击面板折叠按钮来实现，如果希望单击标题栏就实现折叠，可在layout的配置对象中设置titleCollapse为true。如果希望切换时显示动画，可设置animate为true。如果希望隐藏面板标题中的折叠按钮，可设置hideCollapseTool为true，这时候，titleCollapse会被自动设置未true。

表单布局（Ext.layout.container.Form）

表单布局与锚布局有点类似，都允许子组件随容器尺寸的变化而调整子组件的大小，不过这只限于输入字段，因而一般只用于只有输入字段的容器。它与锚布局的不同之处在于不需要在子组件定义anchor配置项。

对于输入字段来说，表单布局与锚布局的实现方式是一样的。他们都是通过样式来实现效果的，在输入字段的封装DIV中，使用了样式“display: table;”，也就是说该DIV的行为与HTML表格的行为是一样的，而对于输入字段的标签和输入框，使用的样式是“display: table-cell;”，也就相当于把输入字段的封装DIV划分成了表格的两列。其中一列显示标签，另一列显示输入框。由于表格会自动跟随父容器的尺寸变化而调整自身的尺寸，这也就实现了子组件跟随容器尺寸的变化而自动做相应的调整。表单布局与锚布局的不同在于表单布局不会去计算输入字段的封装DIV的宽度，直接设置未100%，而锚布局会根据设置去计算封装DIV的宽度和高度。而这也是锚布局内可使用任何子组件，而表单布局内只能使用输入字段的一个原因，因为锚布局可根据设置去计算子组件的宽度和高度，而表单布局则不会。如果在表单布局内使用非输入字段类的组件，由于没有计算过程，就等于使用了自动布局，子组件的尺寸默认是多少就是多少了，不会去做调整，而输入字段自身的表格特性不需要这样的计算就能正确。

使用表单布局，只需要在容器中将layout定义为“form”就行了。使用labelWidth可设置输入字段的标签的宽度。

表格布局（Ext.layout.container.Table）

表格布局是使用TABLE元素实现的布局，因而，一般情况，其他布局能实现的效果，就不要建议使用该布局。

使用表格布局，除了要将布局类型定义为table，还需要使用columns来定义表格的列数。要定义表格的属性，可使用tableAttrs配置项；要定义行的属性，可使用trAttrs配置项；要定义单元格的属性，可使用tdAttrs配置项。

如果没有特别说明，容器会依子组件的定义次序将子组件写入表格第一个中，如定义了2列，3个子组件，则第一个子组件会渲染在表格的第一行第一列，而第二子组件会渲染在第一行第二列，第三个子组件会渲染在第二行第一列。如果要实现跨列，则可在子组件中使用colspan配置项来声明跨几列，要跨行，则使用rowspan配置项。要定义单元格的id，可使用cellId配置项。要定义单元格的样式，可使用cellCls配置项。

小结

在使用Ext JS的时候，显示错误多半是使用了错误的布局造成的，因而，能熟练的使用布局是相当重要的。而要能熟练使用布局，最好的方式就是能了解各种布局在页面中是如何实现的，并了解这些实现的特性，从而对布局了然于胸，这样，就不怕用错布局了。

在下文，将介绍面板。

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