Ext2.0正式版雖然還沒出來，但是官網上的例程還是令人興奮不已。內存泄漏的問題應該是解決了，布局類更新了，增加了新的東西，grid的功能更加強大，tabs也增加了循環按鈕，還增加了類似delphi action manager的action類，在反映速度上也有一定的提升，這些新功能確實很令人振奮，可惜正式版還沒出來，API也還沒出來，所以想立刻使用2.0版做開發的，會有一定的困難。本文的目的就是和大家一起探討一下2.0版的布局類，希望在API沒有出來之前對大家的開發有所幫助，還有就是希望大家提供一些反饋意見，以便完善這篇文章。多謝！
Ext2.0版的布局類，最大的改動是：
1、取消了內容面板contentPanel類，代替的是panel類的。在panel類中，會根據layout的定義不同自動生成布局樣式，這樣就不需要自己再去定義布局了，只要在panel定義中加入布局的定義就可以實現布局了。由panel類派生出formpanel、girdpanel、tabpanel、treepanel等子類，各子類中已根據自己的需要固定了不同的布局類型，例如在創建formpanel時會創建formlayout。
2、增加Container類，并派生出viewpoint類作為全局布局的接口。
3、取消了layoutManger類，增加了ContainerLayout類，而borderLayout類的父類也修改為ContainerLayout。
4、BasicLayoutRegion類也取消了，因此它的子類LayoutRegion以及LayoutRegion類的子類SplitLayoutRegion都取消了。代替的是在borderLayout類下增加了Region類和SplitRegion類。
5、在區域內再劃分區域的NestedLayoutPanel類也根據框架的改變而取消了。至于如何再劃分區域，請繼續閱讀本文。
6、增加了AccordianLayout、AnchorLayout、CardLayout、CoulmnLayout、FitLayout、FormLayout、TableLayout等新的類。
7、原有的用contentPanel可以做出的tab效果，現在則需要使用tabpanel實現。
隨著類的繼承關系的改變，布局的創建方法也做了很大的變動。我的看法是做這樣大的框架的修改主要原因解決內存泄漏的問題。
我們先來了解一下新的布局類的繼承關系：
從圖中我們可以看出Layout類獨立出來了，不再象1.1版那樣繼承自Observable類了。估計這樣修改是未來避免內存泄漏的（猜的，水平有限，所以請多見諒）。
下面我們來看看各個類的情況：
1、Observable類
Observable類和1.1版的相同，沒有修改，是一個抽象基類，為發布事件提供一個公共接口，其子類可通過addEvents方法增加事件。API可以直接參考1.1的API。
2、Component類
Component類和1.1版的相同，沒有修改，是Ext組件的主要基類。API可以直接參考1.1的API。
3、BoxComponent類
BoxComponent類和1.1版的相同，沒有改變，是需要使用盒子容器的可視化Ext組件的基類。API可以直接參考1.1的API。
4、Container類
Container類是新增加的一個基類。其主要作用是管理容器里的布局對象，負責布局對象的創建與摧毀。它通過一個JSON結構（Ext.Container.LAYOUTS={}）來保存布局對象，通過layout屬性值和items的JSON定義自動創建這些布局對象，并通過一個JSON結構記錄這些布局對象，這樣就可在面板對象生命周期內對其進行管理，防止布局中面板關閉時發生內存泄漏。Container類設置了布局中默認面板為panel，如果需要使用其它panel，則需要在items中進行定義。
5、Viewport類
Viewport類也是新增的一個類，是Container類的子類。Viewport類其實就是將頁面body作為一個Ext對象，然后通過該對象管理body上的布局對象。Viewprot類的默認面板是panel面板，因為panel并沒有指定特定的布局，所以要通過layout屬性指定布局，并在items中定義的面板對象定義中加入該布局的定義。Layout屬性可選的范圍值為container、anchor、form、border、column、fit、accordion、card和table。
6、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來定義。
7、ContainerLayout類
ContainerLayout類是新增的一個容器布局類，是其它布局的類的基類，其作用主要是為子類提供基本的屬性、方法和事件：monitorResize(是否檢測窗口大小的改變)、activeItem（當前活動的對象）、layout（子布局的類型）、onLayout（顯示布局事件）、isValidParent（是否有有效的父節點）、renderAll（輸出內容）、renderItem（輸出某個子對象）、onResize（大小改變時間）、setContainer（設置容器）和parseMargins（取消外補丁）。
8、BorderLayout類
BorderLayout類保持了1.1版的屬性、事件和方法，只是其繼承對象變成了ContainerLayout類。雖然其內部運作方法不同，但是還是可以根據1.1版的API去定義BorderLayout對象。
9、anchorLayout類和formLayout類
anchorLayout類是新增的類，它的源代碼很簡單，主要功能就是定義一個顯示內容的空白區域。具體的應用看layout下的anchor.html文件看不出有什么特點，呵呵。
formLayout也是新增的類，繼承于anchorLayout，主要是為formPanle服務，創建formPanel時創建該布局，主要屬性為labelSeparator（標題分隔符）。
10、 ColumnLayout類
ColumnLayout類是新增的類，替代1.1版的Ext.form.Column。代碼書寫方式比以前更簡單更方便。
11、 FitLayout類、Accordion類和CardLayout類
FitLayout也是新增的類，主要是創建一個適應容器大小的布局區域。沒什么特殊的屬性和方法。
Accordion類是FitLayoutd類的子類，主要是創建類似outlook bar的效果，這是一個令人相當興奮的功能，很多人估計早就盼望有這東西了。比使用Ext.ux.Accordion會方便很多。
CardLayoyt也是一個新增的類，但是沒有例子，所以不知道主要效果是什么。
12、 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 0”。在該區域還劃分了一個用fitLayout作為布局的區域（layout:'fit'），這里就不再象1.1版那樣用NestedLayoutPanel再劃分區域會出現的問題了。在fitLayout里放置了一個tabpanel的面板，面板的沒有邊，當前激活的tab是第2個（注意tab的index是從0開始的），tab標簽放置在底部，該tab定義了兩個標簽頁。 }, {
region:'east',
title: 'East Side',
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('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
}
})]
})
},{
west區域也是用panel作為面板，html元件為“west-panel”，顯示標題為“West”，有分隔控制條，初始寬度為200，最小寬度為175，最大寬度為400，允許折疊，內補丁為“0 0 0 5”，在區域內部又使用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版的布局類的一些理解和分析，因水平有限，難免會有錯漏和偏差，希望大家原諒，多謝！