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