谈谈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的时候，显示错误多半是使用了错误的布局形成的，于是，能熟练的使用布局是至关重要的。而要能熟练使用布局，最好的方式就是能了解各类布局在页面中是如何实现的，并了解这些实现的特性，从而对布局了然于胸，这样，就不怕用错布局了。

在下文，将介绍面板。

请你们尊重做者的辛勤劳动，未经容许，请不要转载本文，毕竟读者的支持是做者撰写文章的动力。