Ext2.0正式版雖然還沒出來，但是官網(wǎng)上的例程還是令人興奮不已。內(nèi)存泄漏的問題應(yīng)該是解決了，布局類更新了，增加了新的東西，grid的功能更加強(qiáng)大，tabs也增加了循環(huán)按鈕，還增加了類似delphi action manager的action類，在反映速度上也有一定的提升，這些新功能確實(shí)很令人振奮，可惜正式版還沒出來，API也還沒出來，所以想立刻使用2.0版做開發(fā)的，會(huì)有一定的困難。本文的目的就是和大家一起探討一下2.0版的布局類，希望在API沒有出來之前對(duì)大家的開發(fā)有所幫助，還有就是希望大家提供一些反饋意見，以便完善這篇文章。多謝！
Ext2.0版的布局類，最大的改動(dòng)是：
1、取消了內(nèi)容面板contentPanel類，代替的是panel類的。在panel類中，會(huì)根據(jù)layout的定義不同自動(dòng)生成布局樣式，這樣就不需要自己再去定義布局了，只要在panel定義中加入布局的定義就可以實(shí)現(xiàn)布局了。由panel類派生出formpanel、girdpanel、tabpanel、treepanel等子類，各子類中已根據(jù)自己的需要固定了不同的布局類型，例如在創(chuàng)建formpanel時(shí)會(huì)創(chuàng)建formlayout。
2、增加Container類，并派生出viewpoint類作為全局布局的接口。
3、取消了layoutManger類，增加了ContainerLayout類，而borderLayout類的父類也修改為ContainerLayout。
4、BasicLayoutRegion類也取消了，因此它的子類LayoutRegion以及LayoutRegion類的子類SplitLayoutRegion都取消了。代替的是在borderLayout類下增加了Region類和SplitRegion類。
5、在區(qū)域內(nèi)再劃分區(qū)域的NestedLayoutPanel類也根據(jù)框架的改變而取消了。至于如何再劃分區(qū)域，請(qǐng)繼續(xù)閱讀本文。
6、增加了AccordianLayout、AnchorLayout、CardLayout、CoulmnLayout、FitLayout、FormLayout、TableLayout等新的類。
7、原有的用contentPanel可以做出的tab效果，現(xiàn)在則需要使用tabpanel實(shí)現(xiàn)。
隨著類的繼承關(guān)系的改變，布局的創(chuàng)建方法也做了很大的變動(dòng)。我的看法是做這樣大的框架的修改主要原因解決內(nèi)存泄漏的問題。
我們先來了解一下新的布局類的繼承關(guān)系：
從圖中我們可以看出Layout類獨(dú)立出來了，不再象1.1版那樣繼承自O(shè)bservable類了。估計(jì)這樣修改是未來避免內(nèi)存泄漏的（猜的，水平有限，所以請(qǐng)多見諒）。
下面我們來看看各個(gè)類的情況：
1、Observable類
Observable類和1.1版的相同，沒有修改，是一個(gè)抽象基類，為發(fā)布事件提供一個(gè)公共接口，其子類可通過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類是新增加的一個(gè)基類。其主要作用是管理容器里的布局對(duì)象，負(fù)責(zé)布局對(duì)象的創(chuàng)建與摧毀。它通過一個(gè)JSON結(jié)構(gòu)（Ext.Container.LAYOUTS={}）來保存布局對(duì)象，通過layout屬性值和items的JSON定義自動(dòng)創(chuàng)建這些布局對(duì)象，并通過一個(gè)JSON結(jié)構(gòu)記錄這些布局對(duì)象，這樣就可在面板對(duì)象生命周期內(nèi)對(duì)其進(jìn)行管理，防止布局中面板關(guān)閉時(shí)發(fā)生內(nèi)存泄漏。Container類設(shè)置了布局中默認(rèn)面板為panel，如果需要使用其它panel，則需要在items中進(jìn)行定義。
5、Viewport類
Viewport類也是新增的一個(gè)類，是Container類的子類。Viewport類其實(shí)就是將頁面body作為一個(gè)Ext對(duì)象，然后通過該對(duì)象管理body上的布局對(duì)象。Viewprot類的默認(rèn)面板是panel面板，因?yàn)閜anel并沒有指定特定的布局，所以要通過layout屬性指定布局，并在items中定義的面板對(duì)象定義中加入該布局的定義。Layout屬性可選的范圍值為container、anchor、form、border、column、fit、accordion、card和table。
6、Panel類
Panel類是新增的面板基類。其基本的屬性、方法和事件與1.1版的contentPanel相似，API可參考contentPanel的API。Panel類和contentPanel類最大的不同是可以根據(jù)layout屬性自動(dòng)生成相應(yīng)的布局，而不是和1.1版那樣定義布局，然后加入contentPanel對(duì)象。
在panel類中增加了一個(gè)很好的功能，就是工具欄定義不再是contentPanel的toolbar了，而是劃分成了tbar和bbar，tbar就是top bar，在面板頂部的工具欄，babr是bottom bar，在面板底部的工具欄，這樣就不用再為toolbar的位置犯難了，呵呵。
panel類也不再象contentPanel那樣本身就是一個(gè)tab面板，如果需要tab方式的面板，則需要用到新的tabPanel來定義。
7、ContainerLayout類
ContainerLayout類是新增的一個(gè)容器布局類，是其它布局的類的基類，其作用主要是為子類提供基本的屬性、方法和事件：monitorResize(是否檢測(cè)窗口大小的改變)、activeItem（當(dāng)前活動(dòng)的對(duì)象）、layout（子布局的類型）、onLayout（顯示布局事件）、isValidParent（是否有有效的父節(jié)點(diǎn)）、renderAll（輸出內(nèi)容）、renderItem（輸出某個(gè)子對(duì)象）、onResize（大小改變時(shí)間）、setContainer（設(shè)置容器）和parseMargins（取消外補(bǔ)丁）。
8、BorderLayout類
BorderLayout類保持了1.1版的屬性、事件和方法，只是其繼承對(duì)象變成了ContainerLayout類。雖然其內(nèi)部運(yùn)作方法不同，但是還是可以根據(jù)1.1版的API去定義BorderLayout對(duì)象。
9、anchorLayout類和formLayout類
anchorLayout類是新增的類，它的源代碼很簡(jiǎn)單，主要功能就是定義一個(gè)顯示內(nèi)容的空白區(qū)域。具體的應(yīng)用看layout下的anchor.html文件看不出有什么特點(diǎn)，呵呵。
formLayout也是新增的類，繼承于anchorLayout，主要是為formPanle服務(wù)，創(chuàng)建formPanel時(shí)創(chuàng)建該布局，主要屬性為labelSeparator（標(biāo)題分隔符）。
10、 ColumnLayout類
ColumnLayout類是新增的類，替代1.1版的Ext.form.Column。代碼書寫方式比以前更簡(jiǎn)單更方便。
11、 FitLayout類、Accordion類和CardLayout類
FitLayout也是新增的類，主要是創(chuàng)建一個(gè)適應(yīng)容器大小的布局區(qū)域。沒什么特殊的屬性和方法。
Accordion類是FitLayoutd類的子類，主要是創(chuàng)建類似outlook bar的效果，這是一個(gè)令人相當(dāng)興奮的功能，很多人估計(jì)早就盼望有這東西了。比使用Ext.ux.Accordion會(huì)方便很多。
CardLayoyt也是一個(gè)新增的類，但是沒有例子，所以不知道主要效果是什么。
12、 tableLayout類
tableLayout類也是新增的類，主要目的是通過一個(gè)表格的形式劃分區(qū)域。
其主要定義是通過“layoutConfig: {columns:3}”設(shè)置列數(shù)，通過“defaults: {frame:true, width:200, height: 200}”來設(shè)置每個(gè)Item的寬度和高度。每個(gè)item可通過類似td定義的方式設(shè)置設(shè)置格式，例如設(shè)置rowspan合并行，colspan合并列等。
Ext 2.0版要實(shí)現(xiàn)一個(gè)布局的主要代碼就是通過layout設(shè)置布局的類型，然后定義items的面板對(duì)象，如果在內(nèi)部再劃分布局，實(shí)現(xiàn)1.1版NestedLayoutPanel的功能，只要在內(nèi)部在面板內(nèi)部再定義items就行了，比以前的代碼書寫方式更方便，更直觀了。下面我們來分析一下complex.html這例子的定義。
例子首先創(chuàng)建了一個(gè)Ext.Viewport進(jìn)行全界面布局，布局使用的是bordeLayout（layout:'border'）。在界面中總共劃分了north、south、wese、east和center五個(gè)大區(qū)域。
north區(qū)域使用了一個(gè)Ext.BoxComponent組件作為該區(qū)域的面板，它的html元件是id為“north”的div（el: 'north'），高度是32（height:32）。 new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),{
south區(qū)域使用了panel作為區(qū)域的面板，因?yàn)閂iewprot的默認(rèn)面板類型為panel，所以不用new Ext.Panel的方式創(chuàng)建面板，直接書寫定義代碼就行了。在代碼中，定義了內(nèi)容的html元件是id為“south”的div（ contentEl: 'south'），帶分隔控制條（split:true），初始高度是100（height: 100，不再使用以前的initialSize），移動(dòng)改變的尺寸最小高度為100（minSize: 100），最大高度為200（maxSize: 200），允許折疊（collapsible: true），標(biāo)題欄顯示‘South’（title:'South'），內(nèi)補(bǔ)丁為（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區(qū)域同樣也是用panel作為其面板，標(biāo)題為“East Side”，允許折疊，有分隔控制條，初始寬度是225，最小寬度為175，最大寬度為400，內(nèi)補(bǔ)丁為“0 5 0 0”。在該區(qū)域還劃分了一個(gè)用fitLayout作為布局的區(qū)域（layout:'fit'），這里就不再象1.1版那樣用NestedLayoutPanel再劃分區(qū)域會(huì)出現(xiàn)的問題了。在fitLayout里放置了一個(gè)tabpanel的面板，面板的沒有邊，當(dāng)前激活的tab是第2個(gè)（注意tab的index是從0開始的），tab標(biāo)簽放置在底部，該tab定義了兩個(gè)標(biāo)簽頁。 }, {
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區(qū)域也是用panel作為面板，html元件為“west-panel”，顯示標(biāo)題為“West”，有分隔控制條，初始寬度為200，最小寬度為175，最大寬度為400，允許折疊，內(nèi)補(bǔ)丁為“0 0 0 5”，在區(qū)域內(nèi)部又使用accordion布局劃分兩個(gè)區(qū)域。這個(gè)內(nèi)部布局變動(dòng)會(huì)顯示動(dòng)畫（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區(qū)域和1.1版的一樣，是必需使用。在這里center區(qū)域不再使用默認(rèn)的panel作為面板了，而是使用tab面板作為其面板（new Ext.TabPanel）。在代碼里定義了兩個(gè)標(biāo)簽頁，激活的是第1個(gè)標(biāo)簽頁。 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
}]
})
以上是我關(guān)于2.0版的布局類的一些理解和分析，因水平有限，難免會(huì)有錯(cuò)漏和偏差，希望大家原諒，多謝！