Ext2.0 正式版雖然還沒(méi)出來(lái)，但是官網(wǎng)上的例程還是令人興奮不已。內(nèi)存泄漏的問(wèn)題應(yīng)該是解決了，布局類(lèi)更新了，增加了新的東西， grid 的功能更加強(qiáng)大， tabs 也增加了循環(huán)按鈕，還增加了類(lèi)似 delphi action manager 的 action 類(lèi)，在反映速度上也有一定的提升，這些新功能確實(shí)很令人振奮，可惜正式版還沒(méi)出來(lái)， API 也還沒(méi)出來(lái)，所以想立刻使用 2.0 版做開(kāi)發(fā)的，會(huì)有一定的困難。本文的目的就是和大家一起探討一下 2.0 版的布局類(lèi)，希望在 API 沒(méi)有出來(lái)之前對(duì)大家的開(kāi)發(fā)有所幫助，還有就是希望大家提供一些反饋意見(jiàn)，以便完善這篇文章。多謝！

Ext2.0 版的布局類(lèi)，最大的改動(dòng)是：

<!--[if !supportLists]--> 1、 <!--[endif]--> 取消了內(nèi)容面板 contentPanel 類(lèi)，代替的是 panel 類(lèi)的。 在 panel 類(lèi)中，會(huì)根據(jù) layout 的定義不同自動(dòng)生成布局樣式，這樣就不需要自己再去定義布局了，只要在 panel 定義中加入布局的定義就可以實(shí)現(xiàn)布局了。 由 panel 類(lèi)派生出 formpanel 、 girdpanel 、 tabpanel 、 treepanel 等子類(lèi)，各子類(lèi)中已根據(jù)自己的需要固定了不同的布局類(lèi)型，例如在創(chuàng)建 formpanel 時(shí)會(huì)創(chuàng)建 formlayout 。

<!--[if !supportLists]--> 2、 <!--[endif]--> 增加 Container 類(lèi)，并派生出 viewpoint 類(lèi)作為全局布局的接口。

<!--[if !supportLists]--> 3、 <!--[endif]--> 取消了 layoutManger 類(lèi)，增加了 ContainerLayout 類(lèi)，而 borderLayout 類(lèi)的父類(lèi)也修改為 ContainerLayout 。

<!--[if !supportLists]--> 4、 <!--[endif]--> BasicLayoutRegion 類(lèi)也取消了，因此它的子類(lèi) LayoutRegion 以及 LayoutRegion 類(lèi)的子類(lèi) SplitLayoutRegion 都取消了。代替的是在 borderLayout 類(lèi)下增加了 Region 類(lèi)和 SplitRegion 類(lèi)。

<!--[if !supportLists]--> 5、 <!--[endif]--> 在區(qū)域內(nèi)再劃分區(qū)域的 NestedLayoutPanel 類(lèi)也根據(jù)框架的改變而取消了。至于如何再劃分區(qū)域，請(qǐng)繼續(xù)閱讀本文。

<!--[if !supportLists]--> 6、 <!--[endif]--> 增加了 AccordianLayout 、 AnchorLayout 、 CardLayout 、 CoulmnLayout 、 FitLayout 、 FormLayout 、 TableLayout 等新的類(lèi)。

<!--[if !supportLists]--> 7、 <!--[endif]--> 原有的用 contentPanel 可以做出的 tab 效果，現(xiàn)在則需要使用 tabpanel 實(shí)現(xiàn)。

隨著類(lèi)的繼承關(guān)系的改變，布局的創(chuàng)建方法也做了很大的變動(dòng)。我的看法是做這樣大的框架的修改主要原因解決內(nèi)存泄漏的問(wèn)題。

我們先來(lái)了解一下新的布局類(lèi)的繼承關(guān)系：

<!--[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 類(lèi)獨(dú)立出來(lái)了，不再象 1.1 版那樣繼承自 Observable 類(lèi)了。估計(jì)這樣修改是未來(lái)避免內(nèi)存泄漏的（猜的，水平有限，所以請(qǐng)多見(jiàn)諒）。

下面我們來(lái)看看各個(gè)類(lèi)的情況：

<!--[if !supportLists]--> 1、 <!--[endif]--> Observable 類(lèi)

    
      Observable
    
    類(lèi)和
    
      1.1
    
    版的相同，沒(méi)有修改，是一個(gè)抽象基類(lèi)，為發(fā)布事件提供一個(gè)公共接口，其子類(lèi)可通過(guò)
    
      
        addEvents
      
      方法
    
    增加事件。
    
      API
    
    可以直接參考
    
      1.1
    
    的
    
      API
    
    。
  

<!--[if !supportLists]--> 2、 <!--[endif]--> Component 類(lèi)

Component 類(lèi)和 1.1 版的相同，沒(méi)有修改，是 Ext 組件的主要基類(lèi)。 API 可以直接參考 1.1 的 API 。

<!--[if !supportLists]--> 3、 <!--[endif]--> BoxComponent 類(lèi)

BoxComponent 類(lèi)和 1.1 版的相同，沒(méi)有改變，是需要使用盒子容器的可視化 Ext 組件的基類(lèi)。 API 可以直接參考 1.1 的 API 。

<!--[if !supportLists]--> 4、 <!--[endif]--> Container 類(lèi)

Container 類(lèi)是新增加的一個(gè)基類(lèi)。其主要作用是管理容器里的布局對(duì)象，負(fù)責(zé)布局對(duì)象的創(chuàng)建與摧毀。它通過(guò)一個(gè) JSON 結(jié)構(gòu)（ Ext.Container.LAYOUTS={} ）來(lái)保存布局對(duì)象，通過(guò) layout 屬性值和 items 的 JSON 定義自動(dòng)創(chuàng)建這些布局對(duì)象，并通過(guò)一個(gè) JSON 結(jié)構(gòu)記錄這些布局對(duì)象，這樣就可在面板對(duì)象生命周期內(nèi)對(duì)其進(jìn)行管理，防止布局中面板關(guān)閉時(shí)發(fā)生內(nèi)存泄漏。 Container 類(lèi)設(shè)置了布局中默認(rèn)面板為 panel ，如果需要使用其它 panel ，則需要在 items 中進(jìn)行定義。

<!--[if !supportLists]--> 5、 <!--[endif]--> Viewport 類(lèi)

Viewport 類(lèi)也是新增的一個(gè)類(lèi)，是 Container 類(lèi)的子類(lèi)。 Viewport 類(lèi)其實(shí)就是將頁(yè)面 body 作為一個(gè) Ext 對(duì)象，然后通過(guò)該對(duì)象管理 body 上的布局對(duì)象。 Viewprot 類(lèi)的默認(rèn)面板是 panel 面板，因?yàn)? panel 并沒(méi)有指定特定的布局，所以要通過(guò) layout 屬性指定布局，并在 items 中定義的面板對(duì)象定義中加入該布局的定義。 Layout 屬性可選的范圍值為 container 、 anchor 、 form 、 border 、 column 、 fit 、 accordion 、 card 和 table 。

<!--[if !supportLists]--> 6、 <!--[endif]--> Panel 類(lèi)

Panel 類(lèi)是新增的面板基類(lèi)。其基本的屬性、方法和事件與 1.1 版的 contentPanel 相似， API 可參考 contentPanel 的 API 。 Panel 類(lèi)和 contentPanel 類(lèi)最大的不同是可以根據(jù) layout 屬性自動(dòng)生成相應(yīng)的布局，而不是和 1.1 版那樣定義布局，然后加入 contentPanel 對(duì)象。

在 panel 類(lèi)中增加了一個(gè)很好的功能，就是工具欄定義不再是 contentPanel 的 toolbar 了，而是劃分成了 tbar 和 bbar ， tbar 就是 top bar ，在面板頂部的工具欄， babr 是 bottom bar ，在面板底部的工具欄，這樣就不用再為 toolbar 的位置犯難了，呵呵。

panel 類(lèi)也不再象 contentPanel 那樣本身就是一個(gè) tab 面板，如果需要 tab 方式的面板，則需要用到新的 tabPanel 來(lái)定義。

<!--[if !supportLists]--> 7、 <!--[endif]--> ContainerLayout 類(lèi)

ContainerLayout 類(lèi)是新增的一個(gè)容器布局類(lèi)，是其它布局的類(lèi)的基類(lèi)，其作用主要是為子類(lèi)提供基本的屬性、方法和事件： monitorResize( 是否 檢測(cè)窗口大小的改變 ) 、 activeItem （當(dāng)前活動(dòng)的對(duì)象）、 layout （子布局的類(lèi)型）、 onLayout （顯示布局事件）、 isValidParent （是否有有效的父節(jié)點(diǎn)）、 renderAll （輸出內(nèi)容）、 renderItem （輸出某個(gè)子對(duì)象）、 onResize （大小改變時(shí)間）、 setContainer （設(shè)置容器）和 parseMargins （取消外補(bǔ)丁）。

<!--[if !supportLists]--> 8、 <!--[endif]--> B orderLayout 類(lèi)

BorderLayout 類(lèi)保持了 1.1 版的屬性、事件和方法，只是其繼承對(duì)象變成了 ContainerLayout 類(lèi)。雖然其內(nèi)部運(yùn)作方法不同，但是還是可以根據(jù) 1.1 版的 API 去定義 BorderLayout 對(duì)象。

<!--[if !supportLists]--> 9、 <!--[endif]--> anchorLayout 類(lèi)和 formLayout 類(lèi)

anchorLayout 類(lèi)是新增的類(lèi)，它的源代碼很簡(jiǎn)單，主要功能就是定義一個(gè)顯示內(nèi)容的空白區(qū)域。具體的應(yīng)用看 layout 下的 anchor.html 文件看不出有什么特點(diǎn)，呵呵。

formLayout 也是新增的類(lèi)，繼承于 anchorLayout ，主要是為 formPanle 服務(wù)，創(chuàng)建 formPanel 時(shí)創(chuàng)建該布局，主要屬性為 labelSeparator （標(biāo)題分隔符）。

<!--[if !supportLists]--> 10、 <!--[endif]--> ColumnLayout 類(lèi)

ColumnLayout 類(lèi)是新增的類(lèi)，替代 1.1 版的 Ext.form.Column 。代碼書(shū)寫(xiě)方式比以前更簡(jiǎn)單更方便。

<!--[if !supportLists]--> 11、 <!--[endif]--> FitLayout 類(lèi)、 Accordion 類(lèi)和 CardLayout 類(lèi)

FitLayout 也是新增的類(lèi)，主要是創(chuàng)建一個(gè)適應(yīng)容器大小的布局區(qū)域。沒(méi)什么特殊的屬性和方法。

Accordion 類(lèi)是 FitLayoutd 類(lèi)的子類(lèi)，主要是創(chuàng)建類(lèi)似 outlook bar 的效果，這是一個(gè)令人相當(dāng)興奮的功能，很多人估計(jì)早就盼望有這東西了。比使用 Ext.ux.Accordion 會(huì)方便很多。

CardLayoyt 也是一個(gè)新增的類(lèi)，但是沒(méi)有例子，所以不知道主要效果是什么。

<!--[if !supportLists]--> 12、 <!--[endif]--> tableLayout 類(lèi)

tableLayout 類(lèi)也是新增的類(lèi)，主要目的是通過(guò)一個(gè)表格的形式劃分區(qū)域。

其主要定義是通過(guò)“ layoutConfig: {columns:3} ”設(shè)置列數(shù)，通過(guò)“ defaults: {frame:true, width:200, height: 200} ”來(lái)設(shè)置每個(gè) Item 的寬度和高度。每個(gè) item 可通過(guò)類(lèi)似 td 定義的方式設(shè)置設(shè)置格式，例如設(shè)置 rowspan 合并行， colspan 合并列等。

Ext 2.0 版要實(shí)現(xiàn)一個(gè)布局的主要代碼就是通過(guò) layout 設(shè)置布局的類(lèi)型，然后定義 items 的面板對(duì)象，如果在內(nèi)部再劃分布局，實(shí)現(xiàn) 1.1 版 NestedLayoutPanel 的功能，只要在內(nèi)部在面板內(nèi)部再定義 items 就行了，比以前的代碼書(shū)寫(xiě)方式更方便，更直觀了。下面我們來(lái)分析一下 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)? Viewprot 的默認(rèn)面板類(lèi)型為 panel ，所以不用 new Ext.Panel 的方式創(chuàng)建面板，直接書(shū)寫(xiě)定義代碼就行了。在代碼中，定義了內(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 <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> 。在該區(qū)域還 劃分了 一個(gè)用 fitLayout 作為布局的區(qū)域（ layout:'fit' ），這里就不再象 1.1 版那樣用 NestedLayoutPanel 再劃分區(qū)域會(huì)出現(xiàn)的問(wèn)題了。在 fitLayout 里放置了一個(gè) tabpanel 的面板，面板的沒(méi)有邊，當(dāng)前激活的 tab 是第 2 個(gè)（注意 tab 的 index 是從 0 開(kāi)始的）， tab 標(biāo)簽放置在底部，該 tab 定義了兩個(gè)標(biāo)簽頁(yè)。

}, { 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 區(qū)域也是用 panel 作為面板， html 元件為“ west-panel ”，顯示標(biāo)題為“ West ”，有分隔控制條，初始寬度為 200 ，最小寬度為 175 ，最大寬度為 400 ，允許折疊，內(nèi)補(bǔ)丁為“ 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> ， 在區(qū)域內(nèi)部 又 使用 accordion 布局劃分兩個(gè)區(qū)域。這個(gè)內(nèi)部布局變動(dòng)會(huì)顯示動(dòng)畫(huà)（ 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)簽頁(yè)，激活的是第 1 個(gè)標(biāo)簽頁(yè)。

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 版的布局類(lèi)的一些理解和分析，因水平有限，難免會(huì)有錯(cuò)漏和偏差，希望大家原諒，多謝！

Ext2.0布局類(lèi)初探