布局 Ext.Layout

 
1 布局概述
从ext2.0开始，最具意义的改进之一就是布局。在创建优雅的程序布局时感受到易用性或灵活性方面带来的好处。在Ext 1.x，布局的开发集中围绕在BorderLayout、Region和ContentPanel几个类。 1.x BorderLayout已经可以方便地生成UI，但要真正创建属于自己的布局，还是没有足够的支持。 创建复杂的布局通常需要手工编写一些代码应付滚动条、嵌套和某些怪癖的问题。
Ext3.0带来了一个可重写的、企业级应用的布局管理系统。 共有11种风格的布局管理器，分别提供构建各种可能的程序布局基础。Ext调控了布局诸如size、定位、滚动条和其他的属性方面的问题，一如既往地简单，开箱即用。在容器也可无限嵌套布局、混合其他不同风格的布局。 布局由容器内置创建，所以布局不应通过关键字new实例化这种方式直接使用。 有一种内部的机制，容器与布局能够很好地协调工作—只需配置好相关的参数，容器就会委托其负责的布局类工作。创建容器的时候，你应选定一种布局的风格以及相关的配置，这两个配置是属性layout和属性layoutConfig。
当你创建嵌套布局时，明白面板包含其他面板是很重要的，布局中的每个面板必须指定一个布局管理器。 多数情况你不需要指定布局的风格如“border”或“accordion”，较常见的是“fit”那一种，会自动调整大小自适应它的容器。 如果你不指定某个布局管理器，默认的是ContainerLayout类，不过这样很可能导致一些意料不到的情况发生，所以最好精确声明一下。
 

注意：
Anchor属性在componnt中定义
Region属性在boxcomponent中定义
1.1 Anchor
这是为一些固定元素相对于容器四条边的布局。元素可通过与边缘的百分比或一个相对值来定位，包含2个子类：absoluteLayout和formLayout。　　
absoluteLayout这种布局,继承了Ext.layout.AnchorLayout并增加了更多的表现能力，为x / y定位使用标准的x和y组件配置选项。实际应用中可能不常用，效果如下。
FormLayout是常用的布局，
这样的布局管理是专为子组件提供的组件和管理形式。它负责渲染的标签。这样的布局时用一个容器管理设定和布局:' '布置形式,应该配置选项通常不需要创建直接通过new。在一个应用程序,配置FormLayout作为它的布局,默认是班自它还提供了内置功能,验证并递交了加载形式。
　　一个容器用FormLayout布局管理。Ext.form.FormPanel或指定的表格布局，下面这些属性可以设置容器内的子项目的配置属性。
　　hideLabels：是否隐藏标签
　　labelAlign：标签的位置
　　labelPad：标签的内补丁
　　labelSeparator：标签与控件之间的间隔符
labelWidth：标签的宽度
在实际应用中，Ext.form.FormPanel 这个类默认布局使用的是Form 布局，而且FormPanel还会创建与<form> 标签相关的组件，因此一般情况下我们直接使用FormPanel 即可。
1.2 Border
布局支持嵌套，滑动面板，微调，滚动区域等操作，是一种常用的布局形式。该布局把容器分为东east，南south，西west，北north，中center5个区域，只需要把具体的组件渲染到区域就可以了。关键属性：
Region：控制浏览器的5个区域
注意点：
1， 必须定义region：center，
2， East和west必须定义width
3， South和north必须定义height
4， 访问各个区域的元素可以如下调用：
MyborderPanel.Layout.west
1.3 Colmn
列布局模式，在这种布局管理下，把容器组件看成一列，各个item按照columnWidth来分配这列，同时也支持width直接使用绝对的数字来分配宽度。

 

1.4 Fit
这是一种有效的而且是常用的布局模式，继承这个类的有2个类：accordionLayout和cardLayout，accordionLayout是折叠式的布局模式，有点类似于tabpanel，所有的panel垂直排列，每次只能打开一个panel。CardLayout是卡片布局，类似于向导模式，同样每次也只能显示一个panel。
1.5 Menu
菜单布局模式，因为menu也是继承自container，所以菜单也自动参与布局，对items中的每个item，每个item的默认xtype为button，自动渲染。
1.6 Toolbar
同样继承自container，所以也同样自动参与布局管理，items中的每个item自动渲染到布局管理器中，默认xtype为button，其他布局默认为panel。
1.7 Box
分为2类，HboxLayout和VboxLayout，HboxLayout：使各个item水平排列，并且控制各个item之间和自己的属性，同理，VboxLayout布局管理各个item垂直排列。
1.8 Table
TableLayout布局管理，把容器当成一个table使用。
LayoutConfig：{columns：3}，
把容器分为3列。其中还有以下属性值得注意：
• rowspan 行间隔.
• colspan 列间隔.
• cellId 单元格ID.
• cellCls 单元格CSS.
2 布局总结
Ext的布局管理，为我们方便的实现了页面元素的管理，而且为延时渲染提供了一套可靠的机制。熟练的掌握布局，有助于我们开发更加高效和美观的界面。
其中最应该注意的一个类是viewport，它本身不是一种布局，只是为其他布局有效的管理了浏览器窗口，虽然它也是继承container的。有一个缺点就是：本身不提供滚动条，如果要使用滚动条，必须在各个区域显示声明，autoScroll为true。