Ext2.0布局类初探

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]-->BorderLayout类

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）。

new Ext.BoxComponent({ // raw

region:'north',

el: 'north',

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'）。

}),{

region:'south',

contentEl: 'south',

split:true,

height: 100,

minSize: 100,

maxSize: 200,

collapsible: true,

title:'South',

margins:'0 0 0 0'

}, {

east区域同样也是用panel作为其面板，标题为“East Side”，允许折叠，有分隔控制条，初始宽度是225，最小宽度为175，最大宽度为400，内补丁为“0 5 0 <chmetcnv unitname="”" sourcevalue="0" hasspace="False" negative="False" numbertype="1" tcsc="0" w:st="on">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定义了两个标签页。

}, {

region:'east',

title: '<place w:st="on">East Side</place>',

collapsible: true,

split:true,

width: 225,

minSize: 175,

maxSize: 400,

layout:'fit',

margins:'0 5 0 0',

items:

new Ext.TabPanel({

border:false,

activeTab:1,

tabPosition:'bottom',

items:[{

html:'<p>A TabPanel component can be a region.</p>',

title: 'A Tab',

autoScroll:true

},

new Ext.grid.PropertyGrid({

title: 'Property Grid',

closable: true,

source: {

"(name)": "Properties Grid",

"grouping": false,

"autoFitColumns": true,

"productionQuality": false,

"created": new Date(Date.parse('<chsdate year="2006" month="10" day="15" islunardate="False" isrocdate="False" w:st="on">10/15/2006</chsdate>')),

"tested": false,

"version": .01,

"borderWidth": 1

}

})]

})

},{

west区域也是用panel作为面板，html元件为“west-panel”，显示标题为“West”，有分隔控制条，初始宽度为200，最小宽度为175，最大宽度为400，允许折叠，内补丁为“0 0 0 <chmetcnv unitname="”" sourcevalue="5" hasspace="False" negative="False" numbertype="1" tcsc="0" w:st="on">5<span lang="EN-US" style=""><span lang="EN-US">”</span></span></chmetcnv>，在区域内部又使用accordion布局划分两个区域。这个内部布局变动会显示动画（layoutConfig:{animate:true}）。

},{

region:'west',

id:'west-panel',

title:'West',

split:true,

width: 200,

minSize: 175,

maxSize: 400,

collapsible: true,

margins:'0 0 0 5',

layout:'accordion',

layoutConfig:{

animate:true

},

items: [{

contentEl: 'west',

title:'Navigation',

border:false,

iconCls:'nav'

},{

title:'Settings',

html:'<p>Some settings in here.</p>',

border:false,

iconCls:'settings'

}]

},

center区域和1.1版的一样，是必需使用。在这里center区域不再使用默认的panel作为面板了，而是使用tab面板作为其面板（new Ext.TabPanel）。在代码里定义了两个标签页，激活的是第1个标签页。

new Ext.TabPanel({

region:'center',

deferredRender:false,

activeTab:0,

items:[{

contentEl:'center1',

title: 'Close Me',

closable:true,

autoScroll:true

},{

contentEl:'center2',

title: 'Center Panel',

autoScroll:true

}]

})

以上是我关于2.0版的布局类的一些理解和分析，因水平有限，难免会有错漏和偏差，希望大家原谅，多谢！