Ext2.0 正式版虽然还没出来，但是官网上的例程还是令人兴奋不已。内存泄漏的问题应该是解决了，布局类更新了，增加了新的东西， grid 的功能更加强大， tabs 也增加了循环按钮，还增加了类似 delphi action manager 的 action 类，在反映速度上也有一定的提升，这些新功能确实很令人振奋，可惜正式版还没出来， API 也还没出来，所以想立刻使用 2.0 版做开发的，会有一定的困难。本文的目的就是和大家一起探讨一下 2.0 版的布局类，希望在 API 没有出来之前对大家的开发有所帮助，还有就是希望大家提供一些反馈意见，以便完善这篇文章。多谢！
Ext2.0 版的布局类，最大的改动是：
<!--[if !supportLists]--> 1、 <!--[endif]--> 取消了内容面板 contentPanel 类，代替的是 panel 类的。 在 panel 类中，会根据 layout 的定义不同自动生成布局样式，这样就不需要自己再去定义布局了，只要在 panel 定义中加入布局的定义就可以实现布局了。 由 panel 类派生出 formpanel 、 girdpanel 、 tabpanel 、 treepanel 等子类，各子类中已根据自己的需要固定了不同的布局类型，例如在创建 formpanel 时会创建 formlayout 。
<!--[if !supportLists]--> 2、 <!--[endif]--> 增加 Container 类，并派生出 viewpoint 类作为全局布局的接口。
<!--[if !supportLists]--> 3、 <!--[endif]--> 取消了 layoutManger 类，增加了 ContainerLayout 类，而 borderLayout 类的父类也修改为 ContainerLayout 。
<!--[if !supportLists]--> 4、 <!--[endif]--> BasicLayoutRegion 类也取消了，因此它的子类 LayoutRegion 以及 LayoutRegion 类的子类 SplitLayoutRegion 都取消了。代替的是在 borderLayout 类下增加了 Region 类和 SplitRegion 类。
<!--[if !supportLists]--> 5、 <!--[endif]--> 在区域内再划分区域的 NestedLayoutPanel 类也根据框架的改变而取消了。至于如何再划分区域，请继续阅读本文。
<!--[if !supportLists]--> 6、 <!--[endif]--> 增加了 AccordianLayout 、 AnchorLayout 、 CardLayout 、 CoulmnLayout 、 FitLayout 、 FormLayout 、 TableLayout 等新的类。
<!--[if !supportLists]--> 7、 <!--[endif]--> 原有的用 contentPanel 可以做出的 tab 效果，现在则需要使用 tabpanel 实现。
随着类的继承关系的改变，布局的创建方法也做了很大的变动。我的看法是做这样大的框架的修改主要原因解决内存泄漏的问题。
我们先来了解一下新的布局类的继承关系：
<!--[if gte vml 1]><v:shapetype id="_x0000_t75"coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe"filled="f" stroked="f"><v:stroke joinstyle="miter" /><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0" /><v:f eqn="sum @0 1 0" /><v:f eqn="sum 0 0 @1" /><v:f eqn="prod @2 1 2" /><v:f eqn="prod @3 21600 pixelWidth" /><v:f eqn="prod @3 21600 pixelHeight" /><v:f eqn="sum @0 0 1" /><v:f eqn="prod @6 1 2" /><v:f eqn="prod @7 21600 pixelWidth" /><v:f eqn="sum @8 21600 0" /><v:f eqn="prod @7 21600 pixelHeight" /><v:f eqn="sum @10 21600 0" /></v:formulas><v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" /><o:lock v:ext="edit" aspectratio="t" /></v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:290.25pt;height:248.25pt'><v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/03/clip_image001.jpg"o:title="Ext2" /></v:shape><![endif]--><!--[if !vml]-->
<!--[endif]-->
从图中我们可以看出 Layout 类独立出来了，不再象 1.1 版那样继承自 Observable 类了。估计这样修改是未来避免内存泄漏的（猜的，水平有限，所以请多见谅）。
下面我们来看看各个类的情况：
<!--[if !supportLists]--> 1、 <!--[endif]--> Observable 类
Observable
类和
1.1
版的相同，没有修改，是一个抽象基类，为发布事件提供一个公共接口，其子类可通过
addEvents
方法
增加事件。
API
可以直接参考
1.1
的
API
。
<!--[if !supportLists]--> 2、 <!--[endif]--> Component 类
Component 类和 1.1 版的相同，没有修改，是 Ext 组件的主要基类。 API 可以直接参考 1.1 的 API 。
<!--[if !supportLists]--> 3、 <!--[endif]--> BoxComponent 类
BoxComponent 类和 1.1 版的相同，没有改变，是需要使用盒子容器的可视化 Ext 组件的基类。 API 可以直接参考 1.1 的 API 。
<!--[if !supportLists]--> 4、 <!--[endif]--> Container 类
Container 类是新增加的一个基类。其主要作用是管理容器里的布局对象，负责布局对象的创建与摧毁。它通过一个 JSON 结构（ Ext.Container.LAYOUTS={} ）来保存布局对象，通过 layout 属性值和 items 的 JSON 定义自动创建这些布局对象，并通过一个 JSON 结构记录这些布局对象，这样就可在面板对象生命周期内对其进行管理，防止布局中面板关闭时发生内存泄漏。 Container 类设置了布局中默认面板为 panel ，如果需要使用其它 panel ，则需要在 items 中进行定义。
<!--[if !supportLists]--> 5、 <!--[endif]--> Viewport 类
Viewport 类也是新增的一个类，是 Container 类的子类。 Viewport 类其实就是将页面 body 作为一个 Ext 对象，然后通过该对象管理 body 上的布局对象。 Viewprot 类的默认面板是 panel 面板，因为 panel 并没有指定特定的布局，所以要通过 layout 属性指定布局，并在 items 中定义的面板对象定义中加入该布局的定义。 Layout 属性可选的范围值为 container 、 anchor 、 form 、 border 、 column 、 fit 、 accordion 、 card 和 table 。
<!--[if !supportLists]--> 6、 <!--[endif]--> Panel 类
Panel 类是新增的面板基类。其基本的属性、方法和事件与 1.1 版的 contentPanel 相似， API 可参考 contentPanel 的 API 。 Panel 类和 contentPanel 类最大的不同是可以根据 layout 属性自动生成相应的布局，而不是和 1.1 版那样定义布局，然后加入 contentPanel 对象。
在 panel 类中增加了一个很好的功能，就是工具栏定义不再是 contentPanel 的 toolbar 了，而是划分成了 tbar 和 bbar ， tbar 就是 top bar ，在面板顶部的工具栏， babr 是 bottom bar ，在面板底部的工具栏，这样就不用再为 toolbar 的位置犯难了，呵呵。
panel 类也不再象 contentPanel 那样本身就是一个 tab 面板，如果需要 tab 方式的面板，则需要用到新的 tabPanel 来定义。
<!--[if !supportLists]--> 7、 <!--[endif]--> ContainerLayout 类
ContainerLayout
类是新增的一个容器布局类，是其它布局的类的基类，其作用主要是为子类提供基本的属性、方法和事件：
monitorResize(
是否
检测窗口大小的改变
)
、
activeItem
（当前活动的对象）、
layout
（子布局的类型）、
onLayout
（显示布局事件）、
isValidParent
（是否有有效的父节点）、
renderAll
（输出内容）、
renderItem
（输出某个子对象）、
onResize
（大小改变时间）、
setContainer
（设置容器）和
parseMargins
（取消外补丁）。
<!--[if !supportLists]-->
8、
<!--[endif]-->
B
orderLayout
类
BorderLayout
类保持了
1.1
版的属性、事件和方法，只是其继承对象变成了
ContainerLayout
类。虽然其内部运作方法不同，但是还是可以根据
1.1
版的
API
去定义
BorderLayout
对象。
<!--[if !supportLists]-->
9、
<!--[endif]-->
anchorLayout
类和
formLayout
类
anchorLayout
类是新增的类，它的源代码很简单，主要功能就是定义一个显示内容的空白区域。具体的应用看
layout
下的
anchor.html
文件看不出有什么特点，呵呵。
formLayout
也是新增的类，继承于
anchorLayout
，主要是为
formPanle
服务，创建
formPanel
时创建该布局，主要属性为
labelSeparator
（标题分隔符）。
<!--[if !supportLists]-->
10、
<!--[endif]-->
ColumnLayout
类
ColumnLayout 类是新增的类，替代 1.1 版的 Ext.form.Column 。代码书写方式比以前更简单更方便。
<!--[if !supportLists]-->
11、
<!--[endif]-->
FitLayout
类、
Accordion
类和
CardLayout
类
FitLayout
也是新增的类，主要是创建一个适应容器大小的布局区域。没什么特殊的属性和方法。
Accordion
类是
FitLayoutd
类的子类，主要是创建类似
outlook bar
的效果，这是一个令人相当兴奋的功能，很多人估计早就盼望有这东西了。比使用
Ext.ux.Accordion
会方便很多。
CardLayoyt
也是一个新增的类，但是没有例子，所以不知道主要效果是什么。
<!--[if !supportLists]-->
12、
<!--[endif]-->
tableLayout
类
tableLayout 类也是新增的类，主要目的是通过一个表格的形式划分区域。
其主要定义是通过“ layoutConfig: {columns:3} ”设置列数，通过“ defaults: {frame:true, width:200, height: 200} ”来设置每个 Item 的宽度和高度。每个 item 可通过类似 td 定义的方式设置设置格式，例如设置 rowspan 合并行， colspan 合并列等。
Ext 2.0 版要实现一个布局的主要代码就是通过 layout 设置布局的类型，然后定义 items 的面板对象，如果在内部再划分布局，实现 1.1 版 NestedLayoutPanel 的功能，只要在内部在面板内部再定义 items 就行了，比以前的代码书写方式更方便，更直观了。下面我们来分析一下 complex.html 这例子的定义。
例子首先创建了一个 Ext.Viewport 进行全界面布局，布局使用的是 bordeLayout （ layout:'border' ）。在界面中总共划分了 north 、 south 、 wese 、 east 和 center 五个大区域。
north
区域使用了一个
Ext.BoxComponent
组件作为该区域的面板，它的
html
元件是
id
为“
north
”的
div
（
el: 'north'
），高度是
32
（
height:32
）。
|
|
south
区域使用了
panel
作为区域的面板，因为
Viewprot
的默认面板类型为
panel
，所以不用
new Ext.Panel
的方式创建面板，直接书写定义代码就行了。在代码中，定义了内容的
html
元件是
id
为“
south
”的
div
（
contentEl: 'south'
）
，带分隔控制条（
split:true
），初始高度是
100
（
height: 100
，不再使用以前的
initialSize
），移动改变的尺寸最小高度为
100
（
minSize: 100
），最大高度为
200
（
maxSize: 200
），允许折叠（
collapsible: true
），标题栏显示‘
South
’（
title:'South'
），内补丁为（
margins:'0 0 0 0'
）。
|
|
east
区域同样也是用
panel
作为其面板，标题为“
East Side
”，允许折叠，有分隔控制条，初始宽度是
225
，最小宽度为
175
，最大宽度为
400
，内补丁为“
0 5 0 <chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="0" unitname="”">0<span lang="EN-US" style=""><span lang="EN-US">”</span></span></chmetcnv>
。在该区域还
划分了
一个用
fitLayout
作为布局的区域（
layout:'fit'
），这里就不再象
1.1
版那样用
NestedLayoutPanel
再划分区域会出现的问题了。在
fitLayout
里放置了一个
tabpanel
的面板，面板的没有边，当前激活的
tab
是第
2
个（注意
tab
的
index
是从
0
开始的），
tab
标签放置在底部，该
tab
定义了两个标签页。
|
|
west
区域也是用
panel
作为面板，
html
元件为“
west-panel
”，显示标题为“
West
”，有分隔控制条，初始宽度为
200
，最小宽度为
175
，最大宽度为
400
，允许折叠，内补丁为“
0 0 0 <chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="5" unitname="”">5<span lang="EN-US" style=""><span lang="EN-US">”</span></span></chmetcnv>
，
在区域内部
又
使用
accordion
布局划分两个区域。这个内部布局变动会显示动画（
layoutConfig:{animate:true}
）。
|
|
center
区域和
1.1
版的一样，是必需使用。在这里
center
区域不再使用默认的
panel
作为面板了，而是使用
tab
面板作为其面板（
new Ext.TabPanel
）。在代码里定义了两个标签页，激活的是第
1
个标签页。
|
|
以上是我关于 2.0 版的布局类的一些理解和分析，因水平有限，难免会有错漏和偏差，希望大家原谅，多谢！
