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
)。
|
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'
)。
|
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
定義了兩個標簽頁。
|
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}
)。
|
center
區域和
1.1
版的一樣,是必需使用。在這里
center
區域不再使用默認的
panel
作為面板了,而是使用
tab
面板作為其面板(
new Ext.TabPanel
)。在代碼里定義了兩個標簽頁,激活的是第
1
個標簽頁。
|
以上是我關于 2.0 版的布局類的一些理解和分析,因水平有限,難免會有錯漏和偏差,希望大家原諒,多謝!
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
