谈谈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。默认情况下。面板的折叠仅仅能通过单击面板折叠button来实现，假设希望单击标题栏就实现折叠，可在layout的配置对象中设置titleCollapse为true。

假设希望切换时显示动画。可设置animate为true。假设希望隐藏面板标题中的折叠button。可设置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的时候，显示错误多半是使用了错误的布局造成的，因而，能熟练的使用布局是相当重要的。而要能熟练使用布局，最好的方式就是能了解各种布局在页面中是怎样实现的，并了解这些实现的特性。从而对布局了然于胸，这样，就不怕用错布局了。

在下文。将介绍面板。

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

$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('

').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i ').text(i));
};
$numbering.fadeIn(1700);
});
});