最近刚刚开始学习ExtJS，其中很重要的一部分就是布局，ExtJS中提供了几种布局，在这里总结一下。
所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。
ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的则不需要layoutConfig配置。
Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。
1.Ext.layout.ContainerLayout容器布局
提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在
2. Ext.layout.FitLayout自适应布局
使用layout:'fit'将使面板子元素自动充满容器，如果容器组件中有多个子元素，则只会显示一个元素，例：
显示结果如下：
如果不使用fit布局，代码如下：
Ext.onReady(function(){
});
显示结果如下：
3.Ext.layout.AccordionLayout折叠布局
扩展自适应布局，layout:'accordion'它包含了多个子面板，任何时候都只有一个子面板处于打开状态，每个面板都有展开和收缩的功能。
Ext.layout.Accordion折叠布局配置表:
activeOnTop
animate
fill
hideCollapseTool
titleCollapse
代码例：
Ext.onReady(function(){
});
显示如下：
点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板，如下图：
4.Ext.layout.CardLayout卡片式布局
扩展自适应布局，layout:'card'它包含了多个子面板，只有一个面板处于显示状态，可以满足安装向导、Tab选项板等应用中面板显示的需求。它用来制作向导或标签页，使用setActiveItem来激活面板。
Ext.layout.CardLayout方法:
setActiveItem(String/Numberitem):void
代码例：
Ext.onReady(function(){
});
显示结果如下：
点击一下“切换”按钮，结果如下图所示：
5. Ext.layout.AnchorLayout锚点布局
根据容器的大小为其所包含的子面板进行定位的布局layout:'anchor'
主要配置项：
加入到使用anchor布局面板中的子面板都支持一个anchor配置项，它是一个包含两个值的字符串，水平值和垂直值。其有效值：
代码例：
Ext.onReady(function(){
});
显示结果如下：
6.Ext.layout.AbsoluteLayout绝对位置布局
根据面板中配置x/y坐标进行定位，layout:'absolute'坐标值支持使用固定值和百分比两种形式。代码例：
Ext.onReady(function(){
});
显示结果如下：
7. Ext.layout.FormLayout
用来管理表单字段的显示，内制了表单布局，提供了表单提交，读取等表单功能，layout:'form'。
Ext.layout.FormLayout配置表:
elementStyle
labelStyle
代码例：
Ext.onReady(function(){
});
显示结果：
在实际应用中，Ext.form.FormPanel这个类默认布局使用的是Form布局，而且FormPanel还会创建与<form>标签相关的组件，因此一般情况下我们直接使用FormPanel即可。上面的例子可改写成如下的形式：
Ext.onReady(function(){
});
显示结果同上。
8. Ext.layout.ColumnLayout列布局
列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。代码例：
Ext.onReady(function(){
});
显示结果如下：
Items也可改为下列代码：
items:[{title:"列1",columnWidth:.2},
{title:"列4",columnWidth:.2}]
或：
items:[{title:"列1",width:200},
结果如下：
9. Ext.layout.TableLayout表格布局
可以指定列数，跨行，跨列，可以创建出复杂的表格布局layout:'table'。使用Table布局，layoutConfig使用columns指定父容器分成3列，子元素中使用rowspan或colspan来指定子元素所横跨的单元格数。代码例：
Ext.onReady(function(){
});
显示结果如下：
10.Ext.layout.BorderLayout边框布局
该布局包含多个面板，是一个面向应用的UI风格的布局，它包含5个部分：east,south,west,north,center,layout:'border'通过region来配置面板。如果没有指定其中的某些部分，其相邻的部分就会扩散，占据其他没有指定的部分。需要注意的是，Border布局的中间部分必不可少。代码例：
Ext.onReady(function(){
});
显示结果如下：
总结：
简单总结起来border布局一般作为页面整体布局来使用；fit布局适用于那种需要将子类完全占满父类容器的情况；column布局用于多列；form是一种表单特有布局方式，实质是一行一控件的形式；table布局适用多行多列但是有时宽高不太容易控制。而且值得强调的一点就是给一个控件设置layout属性，其实指的是其内部控件的布局方式而不是它本身的布局，这点要搞清楚。
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
