Ext布局摘要

布局就是指容器组件中子元素的分布、排列组合方式。

ExtJS2.0一共包含十种布局，常用的布局有border 、 column 、 fit 、 form 、 card 、 tabel等布局。

1、Ext.layout.ContainerLayout 容器布局。ExtJS的布局基类为Ext.layout.ContainerLayout ，其它布局都是继承该类。如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中。

 

2、Border布局由类 Ext.layout.BorderLayout定义，布局名称为 border 。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border 布局会自动把子元素放到布局指定的位置。

 

3、Column列布局由Ext.layout.ColumnLayout类定义，名称为column 。列布局把整个容器
组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。 columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。

 

4、Ext.layout.FitLayout 自适应布局,使用layout:'fit' 将使面板子元素自动充满容器,fit组件的items只能放一个组件，如果有多个组件也只会显示第一个.items中的表格切忌不能设置autoHeight:true参数，因为这样会使FitLayout失效。它会重新计算表格高度，最后使得表格无法填充整个页面。

 

5、Form布局由类Ext.layout.FormLayout定义，名称为form ，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。

 

6、Accordion布局由类Ext.layout.Accordion定义，名称为accordion ，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。

 

7、Table布局由类Ext.layout.TableLayout定义，名称为table，该布局负责把容器中的子元素当做类似普通html标签。可以指定列数，跨行，跨列，可以创建出复杂的表格布局。

 

8、Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。使用setActiveItem来激活面板。

 

9、Ext.layout.AnchorLayout锚点布局根据容器的大小为其所包含的子面板进行定位的布局 layout:'anchor'  分为：百分比，偏移，参考边 三种方式的定位。

 

10、Ext.layout.AbsoluteLayout 绝对位置布局根据面板中配置 x/y 坐标进行定位，layout:'absolute' 坐标值支持使用固定值和百分比两种形式 。