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

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 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 定義了兩個標簽頁。

}, { 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 w:st="on" isrocdate="False" islunardate="False" day="15" month="10" year="2006">10/15/2006</chsdate>')), "tested": false, "version": .01, "borderWidth": 1 } })] }) },{

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

},{ 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 版的布局類的一些理解和分析，因水平有限，難免會有錯漏和偏差，希望大家原諒，多謝！

Ext2.0布局類初探