溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Ext布局類的介紹與使用
在WEB應用的開發中，應用界面的布局設計是一項很重要的內容。在EXT中，可以通過BorderLayout與NestedLayoutPanel很方便的設計出各種的布局。本文章的主要內容主要是介紹如何通過BorderLayout、NestedLayoutPanel以及各種面板設計頁面布局。
1. BorderLayout類
BorderLayout類是布局中的最基本的單元，它已預設了south、 east、 west、 north和center等5個區域。你可以根據你的需要任意組合這些區域，但是要注意的一點就是，center區域是必須使用的，而且center區域不允許隱藏和折疊。
創建一個新布局的語句如下：
new BorderLayout( String/HTMLElement/Element container, Object config )
其參數分別是：
container： 綁定布局的容器。綁定布局的容易可以是docume.body，也可以是其它HTMLElement。不過如果是其它HTMLElement，該HTMLElement不能是絕對定位的，或者要在該HTMLElement中加入css定義“position:relative”，還需要為該HTMLElement設置大小。
config： 布局區域的劃分與定義。主要是對north、south、center、east和west五個區域就行定義。區域的定義請參考LayoutRegion類的定義參數。
BorderLayout類常用的屬性、方法與事件如表1。
屬性
monitorWindowResize 如果設置為發綠色，則不檢測窗口大小的改變。默認值為true。
方法
add 增加一個內容面板（或子類）到某個區域。
定義：public function add( String target, Ext.ContentPanel panel )
參數：
target：目標區域的關鍵字（north、south、 east、 west 或center）
panel：要增加的面板類
返回：Ext.ContentPanel
addRegion 增加一個不存在的區域。
定義：public function addRegion( String target, Object config )
參數：
target：目標區域的關鍵字（north、south、 east、 west 或center）
config：區域定義對象。
返回：BorderLayoutRegion
beginUpdate 暫時停止LayoutManager的自動布局管理。
定義：public function beginUpdate()
參數：無
返回：void
endUpdate 恢復LayoutManager的自動管理同時結束更新。
定義：public function endUpdate( Boolean noLayout )
參數：
noLayout ：如果為true則不進行布局更新。默認值為false。
返回：void
findPanel 通過id查找區域內的面板。
定義：public function findPanel( String panelId )
參數：
panelId：面板id。
返回：Ext.ContentPanel或者null（沒有找到）。
getEl 返回綁定布局的元件。
定義：public function getEl()
參數：無
返回：Ext.Element
getRegion 根據關鍵字返回指定的區域。
定義：public function getRegion( String target )
參數：
target：目標區域的關鍵字（north、south、 east、 west 或center）
返回：Ext.LayoutRegion
remove 從某個區域中移除一個內容面板（或子類）。
定義：public function remove( String target, Number/String/Ext.ContentPanel panel )
參數：
target：目標區域的關鍵字（north、south、 east、 west 或center）
panel：要移除面板的索引值、id或者對象本身。
返回：Ext.ContentPanel
restoreState 使用Ext.state.Manager或者狀態提供者重建布局。
定義：public function restoreState( [Ext.state.Provider provider] )
參數：
provider : Ext.state.Provider（可選）
返回：void
showPanel 設置某個面板為當前活動面板。
定義：public function showPanel( String/ContentPanel panelId )
參數：
panelId：要設置的面板id或對象本身。
返回：Ext.ContentPanel或者null（面板不存在）
事件
regioncollapsed 當一個區域折疊的時候觸發本事件。
傳遞參數：
region : Ext.LayoutRegion（折疊的區域對象）
regionexpanded 當一個區域展開的時候觸發本事件。
傳遞參數：
region : Ext.LayoutRegion（展開的區域對象）
regionresized 當用戶改變區域大小的時候觸發本事件。
傳遞參數：
region : Ext.LayoutRegion（改變大小的區域對象）
newSize: 新的區域大小（east/west為寬度,north/south為高度）。
表1
2. LayoutRegion類
因為布局是預定好了五個區域的，所以LayoutRegion類不可以創建， 只可以對預定區域進行設置、操作和附加事件。
LayoutRegion的常用的屬性、方法、事件和定義參數如表2。
屬性
bodyEl 返回該區域的主元件對象，類型為Ext.Element。
collapsedEl 返回該區域折疊后的主html元件對象，類型為Ext.Element。
el 返回該區域的容器元件對象，類型為Ext.Element。
panels 返回該區域中的面板集合。類型為Ext.util.MixedCollection
titleEl 返回該區域的標題欄元件對象，類型為Ext.Element。
titleTextEl 返回該區域的標題顯示元件，類型為HTMLElement。
方法
add 增加一個內容面板（或子類）到該區域。
定義：public function add( ContentPanel... panel )
參數：
panel：要增加的面板，可以是多個。
返回：Ext.ContentPanel，如果只增加一個，則返回增加的面板對象，否則返回null。
collapses 折疊該區域。
定義：public function collapse( [Boolean skipAnim] )
參數：
skipAnim：如果為true則在折疊區域時不顯示動態效果（如果animate設置為true），可選參數。
返回：void
expand 展開該區域、
定義：public function expand( Ext.EventObject e, [Boolean skipAnim] )
參數：
e： 觸發展開區域的事件，如果手動調用則設置null。
skipAnim：如果為true則在展開區域時不顯示動態效果（如果animate設置為true），可選參數。
返回：void
getActivePanel 獲取當前為活動狀態的面板。
定義public function getActivePanel()
參數：無
返回：Ext.ContentPanel或null
getEl 返回該區域的容器元件。
定義：public function findPanel( String panelId )
參數：無
返回：Ext. Element
getPanel 根據面板的索引、id或對象本身返回面板。
定義：public function getPanel( Number/String/ContentPanel panel )
參數：
Panel：面板的索引、id或對象本身
返回：Ext.ContentPanel
getPosition 返回該區域的位置(north/south/east/west/center)。
定義：public function getPosition()
參數：無
返回：String
getTabs 返回該區域中的tab面板。
定義：public function getTabs()
參數：無
返回：Ext.TabPanel
hasPanel 檢查某個面板是否在該區域。
定義：public function hasPanel( Number/String/ContentPanel panel )
參數：
panel: 面板的索引、id或對象本身
返回：Boolean
hide 隱藏該面板。
定義：public function hide()
參數：無
返回：void
hidePanel 根據面板的索引、id或對象本身隱藏面板。
定義：public function getPanel( Number/String/ContentPanel panel )
參數：
Panel：面板的索引、id或對象本身
返回：void
isVisible 檢查該區域是否可見的。
定義：public function isVisible()
參數：無
返回：Boolean，如果該區域可見返回true
remove 從該區域中移除一個面板。
定義：public function remove(Number/String/Ext.ContentPanel panel )
參數：
panel：要移除面板的索引值、id或者對象本身。
返回：Ext.ContentPanel
resizeTo 調整區域大小。如果是垂直區域(west, east)則調整寬度，如果是水平區域(north, south)則調整高度。
定義：public function resizeTo( Number newSize )
參數：
newSize：新的寬度或高度
返回：void
setCollapsedTitle 設置north/south區域折疊時的標題（可通過定義collapsedTitle參數設置）。
定義：public function setCollapsedTitle( [String title] )
參數：
title：可選參數，標題文本可以是HTML標記
返回：void
show 顯示該區域。
定義：public function show()
參數：無
返回：void
showPanel 顯示該區域中某個面板。
定義：public function showPanel( Number/String/ContentPanel panelId )
參數：
panelId：要顯示面板的索引值、id或者對象本身。
返回：Ext.ContentPanel
unhidePanel 顯示被隱藏了的面板的標簽。
定義：public function unhidePanel( Number/String/ContentPanel panel )
參數：
panelId：要顯示面板的索引值、id或者對象本身。
返回：void
事件
beforeremove 當一個面板被移動或關閉時出發本事件。如果要取消該操作，請在事件中設置：e.cancel = true
傳遞參數：
this：Ext.LayoutRegion
panel：Ext.ContentPanel
e：取消事件對象
collapsed 當該區域被折疊是觸發本事件。
傳遞參數：
this : Ext.LayoutRegion
expanded 當該區域被展開是觸發本事件。
傳遞參數：
this : Ext.LayoutRegion
invalidated 當該區域在布局中改變時觸發本時間。
傳遞參數：
this : Ext.LayoutRegion
panelactivated 當該區域中某個面板成為活動面板時觸發本事件。
傳遞參數：
this：Ext.LayoutRegion
panel：Ext.ContentPanel
paneladded 當該區域中增加面板時觸發本事件。
傳遞參數：
this：Ext.LayoutRegion
panel：Ext.ContentPanel
panelremoved 當該區域中刪除面板時觸發本事件。
傳遞參數：
this：Ext.LayoutRegion
panel：Ext.ContentPanel
resized 當用戶改變區域大小時觸發本事件。
傳遞參數：
this：Ext.LayoutRegion
newSize：新的寬度（east/west）或高度（north/south）
visibilitychange 當該區域顯示狀態改變時觸發本事件。
傳遞參數：
this：Ext.LayoutRegion
visibility：顯示（ture）或隱藏（false）
區域定義參數
alwaysShowTabs 如果設置為true，則總是顯示標簽欄。默認值未false。
animate 如果設置為true，則在展開和折疊時有動畫效果。缺省值為false。
autoHide 如果設置為false，則當鼠標離開“浮動”區域的時候不自動隱藏。默認值是true。
autoScroll 如果設置為true，則當顯示內容超出區域時顯示滾動條，默認值為false。
closeOnTab 如果設置為true，則在標簽標題顯示關閉圖標。默認值未false。
cmargins 設置區域折疊時四邊的外延邊距。默認值是：north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0}。
collapsed 如果設置為true，則顯示初始化為折疊狀態。默認值為false。
collapsedTitle 在north或south區域折疊時顯示的信息。
collapsible 如果設置為false，則不允許折疊。缺省值為true。
disableTabTips 如果設置為true，則屏蔽標簽提示信息。默認值為false。
duration 設置展開和折疊區域時的動畫效果時間長度。默認值是0.3
floatable 如果設置為false，則不允許浮動。默認值為true。
hidden 如果設置為true，則區域初始化為隱藏狀態。默認值為false。
hideTabs 如果設置為true，則不顯示標簽。默認值為false。
hideWhenEmpty 如果設置為true，則當該區域沒有面板的時候隱藏區域。
initialSize 設置該區域的初始大小。north、south是高度，east、west為寬度，center如果是上下分區則設置高度，如果是左右分區則是寬度。
margins 設置對象四邊的外延邊距。默認值是{top: 0, left: 0, right:0, bottom: 0}。
maxSize 設置該區域的最大尺寸。north、south是高度，east、west為寬度，center如果是上下分區則設置高度，如果是左右分區則是寬度。
minSize 設置該區域的最小尺寸。north、south是高度，east、west為寬度，center如果是上下分區則設置高度，如果是左右分區則是寬度。
minTabWidth 設置標簽的最小寬度。默認值是40。
preferredTabWidth 設置首先的標簽寬度。默認值是150。
preservePanels 如果設置為true，則保留被移除的面板以便重新打開。默認值為false。
resizeTabs 如果設置為true，則會自動設置標簽的大小，這將會根據標簽欄的空間自動調整所有標簽到相同的大小，類似于FireFox 1.5的標簽欄。默認值是false。
showPin 如果設置為true，則顯示大頭針按鈕。默認值為false。
slideDuration 設置區域浮動或隱藏時的動畫效果時間。默認值是0.45
split 如果設置為true，則顯示分割控制條，允許改變區域的大小。默認值為false。
tabPosition 設置標簽的顯示位置是在頂部還是底部，默認值為“bottom”，標簽顯示在底部。如果要標簽顯示在頂部，設置值為“top”。
title 設置區域的標題（顯示在面板的頂部）。如果設置titlebar的值為false，則該設置的值不會被顯示。
titlebar 如果設置為true，則顯示標題欄，否則不顯示標題欄。默認值是true。
toolbar 設置由Ext.Toolbar創建的工具條。
useShim 設置分割控制條是否通過div層在iframes上進行拖動。默認值為false。
表2
3. ContentPanel類
ContentPanel是一個基本的面板類。面板的作用就是提供一個容器，大家可以在這個容器里加入自己要輸出的內容，例如表格、樹列表、Iframe等等。從contentPanel派生出GridPanel類和NestedLayoutPanel類。
創建一個新面板的語句如下：
new ContentPanel ( String/HTMLElement/Ext.Element el, String/Object config, [String content] )
其參數分別是：
el： 綁定面板的容器。可以是HTMLElement的id，HTMLElement本身或者Ext.Element。
config： 面板的定義。可以是字符類型（只設置面板標題），也可以是一個定義參數對象，定義參數請參閱表3的定義參數。
Content 可選參數，字符類型，設置這個面板的HTML內容。
ContentPanel類常用的屬性、方法、事件和定義參數如表3。
屬性
該類沒有公共屬性。
方法
destroy 清除面板。。
定義：public function destroy()
參數：無
返回：void
getEl 返回該面板的元件。
定義：public function getEl()
參數：無
返回：Ext.Element
getId 返回該面板的id
定義：public function getId()
參數：無
返回：字符串
getTitle 返回該面板的標題
定義：public function getTitle()
參數：無
返回：字符串
getToolbar 返回該面板設置的工具條。
定義：public function getToolbar()
參數：無
返回：Ext.Toolbar
getUpdateManager 返回該面板的更新管理器，從而進行Ajax更新。
定義：public function getUpdateManager()
參數：無
返回：Ext.UpdateManager
isClosable 返回該面板是否設置了關閉圖標，允許關閉。
定義：public function isClosable()
參數：無
返回：布爾值。
load 從XHR立即加載面板的內容。注意：如果要面板被激活時才加載內容，請使用setUrl方法。
定義：public function load( Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] )
參數：
url：請求返回內容的頁面地址。可以是單獨的地址字符串，也可以是一個定義對象，或者是一個函數。
params：要提交的url的參數。可選參數。
callback：回調函數。當傳輸完成后，執行該函數。可選。函數返回三個參數：oElement（對象本身）、 bSuccess（是否傳輸成功）、 oResponse（提交后返回的內容）。
discardUrl：布爾值。可選。默認情況下，如果你執行一個更新后，默認url將會被修改。如果該參數設置為true，則不修改默認url。
返回：Ext.ContentPanel
refresh 強制面板通過setUrl方法更新內容。如果沒有調用setUrl方法，該方法將不執行。該方法不需要面板為活動面板時才更新內容。
定義：public function refresh()
參數：無
返回：void
setContent 設置面板內容。
定義：public function setContent( String content, [Boolean loadScripts] )
參數：
content：面板內容。
loadScripts：如果設置為true，則在content尋找腳本并執行。可選參數。
返回：void
setTitle 設置面板標題。
定義：public function setTitle( String title )
參數：
title：面板標題。
返回：void
setUrl 設置url以便面板加載內容。當面板是活動面板時，內容將自動從URL加載內容。
定義：public function setUrl( String/Function url, [String/Object params], [Boolean loadOnce] )
參數：
url：參考load方法。
params：參考load方法。
loadOnce：布爾值。如果設置為false，則每當面板成為活動面板時都會從Ajax加載內容。如果設置為true，則只加載一次。默認值是false。
返回：Ext.UpdateManager
事件
activate 當面板成為活動面板時觸發本事件。
傳遞參數：
this : Ext.ContentPanel（觸發事件的面板對象）
deactivate 當面板成為非活動面板時觸發本事件。
傳遞參數：
this : Ext.ContentPanel（觸發事件的面板對象）
resize 如果面板定義fitToFrame為true，則當面板改變大小時觸發該事件。
傳遞參數：
this : Ext.ContentPanel（觸發事件的面板對象）
width：面板調整大小后的寬度
height：面板調整大小后的高度
面板定義參數
adjustments 當執行fitToFrame時增加的寬度和高度，默認值是[0,0]
autoCreate 如果設置為true，則自動為該面板產生DOM element或者由Ext.DomHelper配置的element被創建。
autoScroll 如果設置為true，則當顯示內容超出面板顯示區域時顯示滾動條，默認值為true。要配合fitToFrame使用。
background 如果設置為true，則添加該面板時，該面板不會成為活動面板。默認值是false。
closable 如果設置為true，則顯示關閉圖標，允許關閉面板。默認值為false。
fitContainer 如果設置為true，則面板會根據區域的變化自動調整面板大小。也可通過設置fitToFrame和resizeEl實現該功能。默認值為false。
fitToFrame 如果設置為true，則面板會根據區域的變化自動調整面板大小。默認值為false。
loadOnce 參看setUrl方法。
params 參看setUrl方法。
resizeEl 如果fitToFrame設置為true，則該方法設置的element會根據區域的變化自動調整大小。
title 設置面板的標題。
toolbar 設置面板的工具條。
url 參看setUrl方法。
表3
4. NestedLayoutPanel
如果一個區域內還需要再細分區域，那么需要用到NestedLayoutPanel類。NestedLayoutPanel類是ContentPanel類的一個擴展。
創建一個NestedLayoutPanel的語句如下：
new NestedLayoutPanel( Ext.BorderLayout layout, String/Object config )
其參數分別是：
layout： 要綁定該面板布局。
config： 面板的定義。可以是字符類型（只設置面板標題），也可以是一個定義參數對象，定義參數請參閱表4的定義參數。
NestedLayoutPanel類常用的屬性、方法、事件和定義參數如表3。
屬性
該類沒有公共屬性。
方法
destroy 清除面板。。
定義：public function destroy()
參數：無
返回：void
getEl 返回該面板的元件。
定義：public function getEl()
參數：無
返回：Ext.Element
getId 返回該面板的id
定義：public function getId()
參數：無
返回：字符串
getLayout 返回該面板的內部布局對象。
定義：public function getTitle()
參數：無
返回：Ext.BorderLayout
getTitle 返回該面板的標題
定義：public function getTitle()
參數：無
返回：字符串
getToolbar 返回該面板設置的工具條。
定義：public function getToolbar()
參數：無
返回：Ext.Toolbar
getUpdateManager 返回該面板的更新管理器，從而進行Ajax更新。
定義：public function getUpdateManager()
參數：無
返回：Ext.UpdateManager
isClosable 返回該面板是否設置了關閉圖標，允許關閉。
定義：public function isClosable()
參數：無
返回：布爾值。
load 從XHR立即加載面板的內容。注意：如果要面板被激活時才加載內容，請使用setUrl方法。
定義：public function load( Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] )
參數：
url：請求返回內容的頁面地址。可以是單獨的地址字符串，也可以是一個定義對象，或者是一個函數。
params：要提交的url的參數。可選參數。
callback：回調函數。當傳輸完成后，執行該函數。可選。函數返回三個參數：oElement（對象本身）、 bSuccess（是否傳輸成功）、 oResponse（提交后返回的內容）。
discardUrl：布爾值。可選。默認情況下，如果你執行一個更新后，默認url將會被修改。如果該參數設置為true，則不修改默認url。
返回：Ext.ContentPanel
refresh 強制面板通過setUrl方法更新內容。如果沒有調用setUrl方法，該方法將不執行。該方法不需要面板為活動面板時才更新內容。
定義：public function refresh()
參數：無
返回：void
setContent 設置面板內容。
定義：public function setContent( String content, [Boolean loadScripts] )
參數：
content：面板內容。
loadScripts：如果設置為true，則在content尋找腳本并執行。可選參數。
返回：void
setTitle 設置面板標題。
定義：public function setTitle( String title )
參數：
title：面板標題。
返回：void
setUrl 設置url以便面板加載內容。當面板是活動面板時，內容將自動從URL加載內容。
定義：public function setUrl( String/Function url, [String/Object params], [Boolean loadOnce] )
參數：
url：參考load方法。
params：參考load方法。
loadOnce：布爾值。如果設置為false，則每當面板成為活動面板時都會從Ajax加載內容。如果設置為true，則只加載一次。默認值是false。
返回：Ext.UpdateManager
事件
activate 當面板成為活動面板時觸發本事件。
傳遞參數：
this : Ext.ContentPanel（觸發事件的面板對象）
deactivate 當面板成為非活動面板時觸發本事件。
傳遞參數：
this : Ext.ContentPanel（觸發事件的面板對象）
resize 如果面板定義fitToFrame為true，則當面板改變大小時觸發該事件。
傳遞參數：
this : Ext.ContentPanel（觸發事件的面板對象）
width：面板調整大小后的寬度
height：面板調整大小后的高度
面板定義參數
adjustments 當執行fitToFrame時增加的寬度和高度，默認值是[0,0]
autoCreate 如果設置為true，則自動為該面板產生DOM element或者由Ext.DomHelper配置的element被創建。
autoScroll 如果設置為true，則當顯示內容超出面板顯示區域時顯示滾動條，默認值為true。要配合fitToFrame使用。
background 如果設置為true，則添加該面板時，該面板不會成為活動面板。默認值是false。
closable 如果設置為true，則顯示關閉圖標，允許關閉面板。默認值為false。
fitContainer 如果設置為true，則面板會根據區域的變化自動調整面板大小。也可通過設置fitToFrame和resizeEl實現該功能。默認值為false。
fitToFrame 如果設置為true，則面板會根據區域的變化自動調整面板大小。默認值為false。
loadOnce 參看setUrl方法。
params 參看setUrl方法。
resizeEl 如果fitToFrame設置為true，則該方法設置的element會根據區域的變化自動調整大小。
title 設置面板的標題。
toolbar 設置面板的工具條。
url 參看setUrl方法。
表4
5. GridPanle
GridPanel是一個contentPanel類的子類。為Grid提供一個面板容器。
創建一個GridPanel的語句如下：
new public function GridPanel( Ext.grid.Grid grid, String/Object config )
其參數分別是：
grid： 要放置的表格。Ext.grid.Grid表格類。
config： 面板的定義。可以是字符類型（只設置面板標題），也可以是一個定義參數對象，定義參數請參閱表3的定義參數。
GridPanel類常用的屬性、方法、事件和定義參數如表4。
屬性
該類沒有公共屬性。
方法
destroy 清除面板。。
定義：public function destroy()
參數：無
返回：void
getEl 返回該面板的元件。
定義：public function getEl()
參數：無
返回：Ext.Element
getGrid 返回該面板的表格。
定義：public function getGrid()
參數：無
返回：Ext.grid.Grid
getId 返回該面板的id
定義：public function getId()
參數：無
返回：字符串
getTitle 返回該面板的標題
定義：public function getTitle()
參數：無
返回：字符串
getToolbar 返回該面板設置的工具條。
定義：public function getToolbar()
參數：無
返回：Ext.Toolbar
getUpdateManager 返回該面板的更新管理器，從而進行Ajax更新。
定義：public function getUpdateManager()
參數：無
返回：Ext.UpdateManager
isClosable 返回該面板是否設置了關閉圖標，允許關閉。
定義：public function isClosable()
參數：無
返回：布爾值。
load 從XHR立即加載面板的內容。注意：如果要面板被激活時才加載內容，請使用setUrl方法。
定義：public function load( Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] )
參數：
url：請求返回內容的頁面地址。可以是單獨的地址字符串，也可以是一個定義對象，或者是一個函數。
params：要提交的url的參數。可選參數。
callback：回調函數。當傳輸完成后，執行該函數。可選。函數返回三個參數：oElement（對象本身）、 bSuccess（是否傳輸成功）、 oResponse（提交后返回的內容）。
discardUrl：布爾值。可選。默認情況下，如果你執行一個更新后，默認url將會被修改。如果該參數設置為true，則不修改默認url。
返回：Ext.ContentPanel
refresh 強制面板通過setUrl方法更新內容。如果沒有調用setUrl方法，該方法將不執行。該方法不需要面板為活動面板時才更新內容。
定義：public function refresh()
參數：無
返回：void
setContent 設置面板內容。
定義：public function setContent( String content, [Boolean loadScripts] )
參數：
content：面板內容。
loadScripts：如果設置為true，則在content尋找腳本并執行。可選參數。
返回：void
setTitle 設置面板標題。
定義：public function setTitle( String title )
參數：
title：面板標題。
返回：void
setUrl 設置url以便面板加載內容。當面板是活動面板時，內容將自動從URL加載內容。
定義：public function setUrl( String/Function url, [String/Object params], [Boolean loadOnce] )
參數：
url：參考load方法。
params：參考load方法。
loadOnce：布爾值。如果設置為false，則每當面板成為活動面板時都會從Ajax加載內容。如果設置為true，則只加載一次。默認值是false。
返回：Ext.UpdateManager
事件
activate 當面板成為活動面板時觸發本事件。
傳遞參數：
this : Ext.ContentPanel（觸發事件的面板對象）
deactivate 當面板成為非活動面板時觸發本事件。
傳遞參數：
this : Ext.ContentPanel（觸發事件的面板對象）
resize 如果面板定義fitToFrame為true，則當面板改變大小時觸發該事件。
傳遞參數：
this : Ext.ContentPanel（觸發事件的面板對象）
width：面板調整大小后的寬度
height：面板調整大小后的高度
面板定義參數
adjustments 當執行fitToFrame時增加的寬度和高度，默認值是[0,0]
autoCreate 如果設置為true，則自動為該面板產生DOM element或者由Ext.DomHelper配置的element被創建。
autoScroll 如果設置為true，則當顯示內容超出面板顯示區域時顯示滾動條，默認值為true。要配合fitToFrame使用。
background 如果設置為true，則添加該面板時，該面板不會成為活動面板。默認值是false。
closable 如果設置為true，則顯示關閉圖標，允許關閉面板。默認值為false。
fitContainer 如果設置為true，則面板會根據區域的變化自動調整面板大小。也可通過設置fitToFrame和resizeEl實現該功能。默認值為false。
fitToFrame 如果設置為true，則面板會根據區域的變化自動調整面板大小。默認值為false。
loadOnce 參看setUrl方法。
params 參看setUrl方法。
resizeEl 如果fitToFrame設置為true，則該方法設置的element會根據區域的變化自動調整大小。
title 設置面板的標題。
toolbar 設置面板的工具條。
url 參看setUrl方法。
表4
6. 一個簡單的例子
通過上面幾節的介紹，我們認識了創建布局的基本類。下面，我們將通過一個簡單的例子來學習如何實現一個布局。
本例子的布局是我們通常用到的應用程序布局，頂部是一個菜單條，中間顯示內容，底部是狀態條，請看圖1。
圖1
本例子是用document.body作為布局的容器的，所以不需要為布局寫一個HTML Element作為容器。布局包含3個區域，所以我們需要寫3個HTML Element作為布局每個區域的容器：
- <div id="north-div"></div>
- <div id="center-div">內容</div>
- <div id="south-div">狀態欄</div>
從代碼我們可以看到，每個div都定義了一個id，其作用就是創建區域面板時的參數el的值。
下面開始撰寫創建布局的javascript代碼。首先是創建一個布局，并定義各區域的參數：
- var tb=new Ext.Toolbar('north'); //創建一個工具條
- tb.add(new Ext.Toolbar.SplitButton({
- text: '文件',
- cls: 'x-btn-text-icon blist',
- menu : {items: [
- {text: '新建', handler: onItemClick},
- {text: '保存', handler: onItemClick}
- ]}}),
- new Ext.Toolbar.MenuButton({
- text: '編輯',
- cls: 'x-btn-text-icon blist',
- menu : {items: [
- {text: '復制', handler: onItemClick},
- {text: '粘貼', handler: onItemClick}
- ]}})
- );
- var layout = new Ext.BorderLayout(document.body,{
- north:{toolbar:tb,initialSize:28},
- center: {alwaysShowTabs:true,tabPosition:'top'},
- south: {initialSize:28}
- });
我們先別看工具條的創建代碼，這個將會在另一篇文章中介紹。從黑體字部分的代碼我們可以看到，我們定義了一個變量layout來保存布局對象，布局的容器是document.body，定義了noth、center和south三個區域。north區域包含一個工具條，高度是28。center區域設置了總是顯示標簽欄，標簽位置在頂部。south區域只設置了高度為28。
雖然我們 定義和創建了布局，但是目前在頁面我們是看不到任何效果的，我們還需要為布局的每個區域加入面板并執行刷新：
- layout.beginUpdate();
- layout.add('north', new Ext.ContentPanel('north-div'));
- layout.add('center', new Ext.ContentPanel('center-div','簡單的布局例子'));
- layout.add('south', new Ext.ContentPanel('south-div'));
- layout.restoreState();
- layout.endUpdate();
首先是通過beginUpdate方法中止LayoutManager的自動布局管理，然后給各區域加入一個面板。在增加center面板時，還增加了一個標題，該標題會作為標簽的文本顯示。然后通過restoreState方法重建布局。最后是通過endUpdate方法在恢復LayoutManager自動管理同時結束更新。這樣，一個簡單的布局就出來。全部代碼如下：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>簡單的布局例子</title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
- </head>
- <body scroll="no">
- <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="../../ext-all.js"></script>
- <script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>
- <div id="north-div"></div>
- <div id="center-div">內容</div>
- <div id="south-div">狀態欄</div>
- <script>
- Ext.onReady(function(){
- var tb=new Ext.Toolbar('north-div');//創建一個工具條
- tb.add(new Ext.Toolbar.SplitButton({
- text: '文件',
- cls: 'x-btn-text-icon blist',
- menu : {items: [
- {text: '新建', handler: onItemClick},
- {text: '保存', handler: onItemClick},
- {text: '加載', handler: onItemClick}
- ]}}),
- new Ext.Toolbar.MenuButton({
- text: '編輯',
- cls: 'x-btn-text-icon blist',
- menu : {items: [
- {text: '復制', handler: onItemClick},
- {text: '粘貼', handler: onItemClick}
- ]}})
- );
- var layout = new Ext.BorderLayout(document.body,{
- north:{toolbar:tb,initialSize:28},
- center: {alwaysShowTabs:true,tabPosition:'top'},
- south: {initialSize:28}
- });
- layout.beginUpdate();
- layout.add('north', new Ext.ContentPanel('north-div'));
- layout.add('center', new Ext.ContentPanel('center-div','簡單的布局例子'));
- layout.add('south', new Ext.ContentPanel('south-div'));
- layout.restoreState();
- layout.endUpdate();
- function onItemClick(item){
- alert(item.text);
- }
- })
- </script>
- </body>
- </html>
最終效果如圖2。本例文件是附件中的examples/layout/simple.html。
圖2
7. 為簡單的例子增加內容
上面一節我們制作了一個簡單的例子，但是沒有內容，那么如何加入內容呢？最簡單的辦法就是在面板綁定容器中直接加入內容。例如在center-div中我們加入了“內容”，在south-div中加入了“狀態欄”：
- <div id="center-div">內容</div>
- <div id="south-div">狀態欄</div>
但是我們的應用通常是動態加載數據的，那怎么辦呢？其實很簡單，就是利用ContentPanel的setContent方法和setUrl方法加載。setContent方法就是直接從JavaScipt程序中插入HTML。setUrl方法則允許您從服務端得到數據加入ContentPanel中。
下面我們先測試一下setContent方法。我們要做的就是當菜單選擇了一個item的時候將選擇的item的文本顯示在狀態欄里。我們將例子中菜單單擊的事件修改如下：
- function onItemClick(item){
- layout.getRegion('south').getPanel('south-div').setContent(item.text);
- }
為了調用setContent方法，我們首先要找到對應的面板，如何找到對應的面板呢？上面的代碼就是通過“layout.getRegion('south')”先找到狀態欄對應的區域south，然后通過面板的id（south-div）找到對應的面板，最后是設置其內容為選擇菜單的文本。找到對應的面板還有一個方法，就是分配一個變量給ContentPanel然后便可直接引用。我們修改一下center區域的面板增加方法，將center區域的面板分配給變量centerContent，然后再增加：
- var centerContent=new Ext.ContentPanel('center-div','簡單的布局例子');
- layout.add('center', centerContent);
下面我們測試一下setUrl方法，在center-div面板中加載內容。操作是單擊文件菜單下的加載后載入內容。我們先修改菜單單擊事件：
- function onItemClick(item){
- layout.getRegion('south').getPanel('south-div').setContent(item.text);
- if(item.text=='加載'){
- centerContent.setUrl('content.html','',true);
- centerContent.refresh();
- }
- }
代碼中直接通過變量centerContent引用面板，調用setUrl方法加載content.html文件，沒有設置提交參數，而且設置了只加載一次，然后強制刷新面板。加載后我們會發現內容超出了面板范圍，有些東西看不見了，怎么辦？很簡單，在創建面板時加入定義參數“fitToFrame”，設置其值為true，再加入“autoScroll”設置其值為true，就可以了：
- var centerContent=new Ext.ContentPanel('center-div',{title:'簡單的布局例子', fitToFrame :true,autoScroll:true});
在IE中存在一個問題，就是加載的內容的樣式沒有生效，原因是一些瀏覽器支持動態樣式而一些不支持，要較好地解決上述問題，推薦使用Iframe。這個我們就不測試了，只提供代碼給大家參考，大家可以自己測試一下：
- //center-div修改如下：
- <div id="center-div"><iframe id="center-iframe" frameborder="0" scrolling="auto" style="border:0px none;"></iframe></div>
代碼修改如下：
- var centerContent=new Ext.ContentPanel('center-div',{title:'簡單的布局例子', fitToFrame :true,autoScroll:true, resizeEl:'center-iframe'});
- function onItemClick(item){
- layout.getRegion('south').getPanel('south-div').setContent(item.text);
- if(item.text=='加載'){
- Ext.get('center-iframe').dom.src=’content.html’
- }
- }
本例文件是附件中的examples/layout/simple-content.html。
8. 一個NestedLayoutPanel和GridPanel的例子
我們已經可以用BorderLayout和ContentPanel建立簡單的布局了，這節我們將用NestedLayPanel和GridPanel創建復雜一點的布局。
布局整體情況如圖3。
圖3
我們先來看看布局容易的定義：
- <div id="north-div"></div>
- <div id="west-div"><div id='treelist'></div></div>
- <div id="center-div">
- <div id='center-center'></div>
- <div id='center-south'></div>
- </div>
- <div id="south-div">狀態欄</div>
從源代碼中我們可以看到大布局分了north、west、center和south四個區域，west區包含一個treelist的div，準備作為樹列表的容器。而在center區域，我們又細分成center和south兩個內部區域，這里就要使用到NestedLayPanel，而id為“center-center”的div將是grid的容器。Norht區域和South的區域與簡單的例子一樣，是作為菜單欄、狀態欄。下面我們看javascript代碼：
- var layout = new Ext.BorderLayout(document.body,{
- north:{toolbar:tb,initialSize:28},
- west:{
- split:true,
- initialSize:200,
- titlebar: true,
- collapsible: true,
- minSize: 100,
- maxSize: 400,
- title:'樹列表',
- },
- center: {},
- south: {initialSize:28}
- });
- layout.beginUpdate();
- var innerLayout=new Ext.BorderLayout('center-div',{
- center:{
- titlebar: true,
- title:'條目列表',
- },
- south:{
- split:true,
- collapsible:true,
- titlebar:true,
- initialSize:200,
- minSize: 100,
- maxSize:400,
- title:'內容',
- collapsedTitle:'內容'
- }
- });
從代碼中，我們看到north和south的定義與簡單的例子一樣。而west區域，我們定義了它的原始大小（initialSize）為200，帶標題欄（titlebar: true），標題欄顯示“樹列表”，可折疊（collapsible: true），帶分割控制條（split:true），通過分割控制條調整區域大小的最小寬度是100，最大寬度是400。而ccenter區域則什么也沒定義。
為了在center區域再劃分出兩個區域，我們需要新創建一個Ext.BorderLayout布局，設置其容器為“center-div”，在布局中定義center和south兩個區域。center區域顯示標題欄，標題為“條目列表”。south區域定義了它的原始大小（initialSize）為200，帶標題欄（titlebar: true），標題欄顯示“內容”，可折疊（collapsible: true），帶分割控制條（split:true），通過分割控制條調整區域大小的最小寬度是100，最大寬度是400，折疊后的折疊欄標題顯示“內容”。
我們注意到，west區域并沒有設置折疊后的顯示標題，為什么呢？其原因是west區域折疊后是垂直折疊條，而目前的HTML沒有提供對一個元素的90度的旋轉，所以我們只能通過修改其背景圖的方式來實現。實現的方法有兩種，一種是通過重新定義west或east的css定義來實現，一種是通過事件利用腳本實現。雖然通過重新定義css來實現雖然簡單，不需要寫javascript代碼，但是存在局限性，就是當存在兩個west區域（一個在主布局，一個在子布局）的時候，都是使用同一個背景圖片，這樣就發生了沖突了。所以一般建議是盡量使用折疊事件來實現。
通過css定義實現的方法：
- .x-layout-collapsed-west{
- background-p_w_picpath:url(p_w_picpaths/yourbackgroundfile.gif);
- background-repeat:no-repeat;
- background-position:center;
- }
- .x-layout-collapsed-east{
- background-p_w_picpath:url(p_w_picpaths/ yourbackgroundfile.gif);
- background-repeat:no-repeat;
- background-position:center;
- }
要通過javascript實現，就是在west區域添加一個“collapsed”事件，就是當west區域折疊事觸發該事件，在事件中修改west區域的背景，代碼如下：
- layout.getRegion('west').on('collapsed',function(region){
- region.collapsedEl.dom.style.background="url(../p_w_picpaths/treelist.gif) center no-repeat";
- },this);
代碼中通過區域的collapsedEl方法返回west區域的HTMLelement，然后設置其背景圖像。
在center區域的子區域center中，我們需要使用GridPanel面板在上面綁定一個表格，所以我們要首先定義一個表格，表格定義的具體代碼可參考Grid的說明文章，我這里就不具體說了：
- var grid = new Ext.grid.Grid('center-center', {
- ds: ds,
- cm: colModel,
- autoExpandColumn:'title'
- });
- grid.render();
- grid.getSelectionModel().selectFirstRow();
- innerLayout.add('center', new Ext.GridPanel(grid));
- innerLayout.add('south', new Ext.ContentPanel('center-south'));
- layout.add('north', new Ext.ContentPanel('north-div'));
- layout.add('west', new Ext.ContentPanel('west-div',{fitToFrame:true,resizeEl:'treelist'}));
- layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
- layout.add('south', new Ext.ContentPanel('south-div'));
代碼中我們可以看到，grid是綁定在id為“center-center”的div容器里，然后通過新建一個GridPanel綁定到center子區域的（innerLayout.add('center', new Ext.GridPanel(grid))）。south、west和north區域的添加代碼和簡單的例子沒什么不同，而不同的地方就是center主區域代碼的添加，不再是contentPanel，而是NestedLayoutPanel了，而其參數是一個BorderLayout類innerLayout。
我們再為例子加上一個樹列表就完成了這個例子了。樹列表的定義與創建也會有專門的文章說明，所以我也不在這里具體說了。
一個完整的NestedLayoutPanel和GridPanel例子代碼如下：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>NestedLayoutPanel的布局例子</title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
- </head>
- <body scroll="no">
- <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="../../ext-all.js"></script>
- <script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>
- <div id="north-div"></div>
- <div id="west-div"><div id='treelist'></div></div>
- <div id="center-div">
- <div id='center-center'></div>
- <div id='center-south'></div>
- </div>
- <div id="south-div">狀態欄</div>
- <script>
- Ext.onReady(function(){
- var tb=new Ext.Toolbar('north-div');//創建一個工具條
- tb.add(new Ext.Toolbar.SplitButton({
- text: '文件',
- cls: 'x-btn-text-icon blist',
- menu : {items: [
- {text: '新建', handler: onItemClick},
- {text: '保存', handler: onItemClick},
- {text: '加載', handler: onItemClick}
- ]}}),
- new Ext.Toolbar.MenuButton({
- text: '編輯',
- cls: 'x-btn-text-icon blist',
- menu : {items: [
- {text: '復制', handler: onItemClick},
- {text: '粘貼', handler: onItemClick}
- ]}})
- );
- var layout = new Ext.BorderLayout(document.body,{
- north:{toolbar:tb,initialSize:28},
- west:{
- split:true,
- initialSize:200,
- titlebar: true,
- collapsible: true,
- minSize: 100,
- maxSize: 400,
- title:'樹列表',
- },
- center: {},
- south: {initialSize:28}
- });
- layout.beginUpdate();
- var innerLayout=new Ext.BorderLayout('center-div',{
- center:{
- titlebar: true,
- title:'條目列表',
- },
- south:{
- split:true,
- collapsible:true,
- titlebar:true,
- initialSize:200,
- minSize: 100,
- maxSize:400,
- title:'內容',
- collapsedTitle:'內容'
- }
- });
- var myData = [
- ['張三','測試','2006-1-1'],
- ['李四','測試一','2006-5-6'],
- ['王五','測試二','2007-12-1'],
- ['劉六','測試三','2006-12-1'],
- ['張三','測試四','2007-6-1'],
- ['李四','測試五','2007-7-1'],
- ['劉六','測試六','2007-8-1'],
- ['張三','測試七','2007-9-1'],
- ['李四','測試八','2007-10-1'],
- ['王五','測試九','2007-11-1'],
- ['劉六','測試六','2007-8-1'],
- ['張三','測試七','2007-9-1'],
- ['李四','測試八','2007-10-1'],
- ['王五','測試九','2007-11-1'],
- ['劉六','測試十','2007-8-1'],
- ['張三','測試十一','2007-9-1'],
- ['李四','測試十二','2007-10-1'],
- ['王五','測試十三','2007-11-1'],
- ['劉六','測試十四','2007-8-1'],
- ['張三','測試十五','2007-9-1'],
- ['李四','測試十六','2007-10-1'],
- ['王五','測試十七','2007-11-1'],
- ['劉六','測試十八','2007-8-1']
- ];
- var ds = new Ext.data.Store({
- proxy: new Ext.data.MemoryProxy(myData),
- reader: new Ext.data.ArrayReader({}, [
- {name:'sender'},
- {name:'title'},
- {name:'sendtime'}
- ])
- });
- ds.load();
- var colModel = new Ext.grid.ColumnModel([
- {header:'發送人',width:100,sortable:true,dataIndex:'sender'},
- {id:'title',header:'標題', width:100,sortable:true,dataIndex:'title'},
- {header:'發送時間',width:75,sortable:true,dataIndex:'sendtime'}
- ]);
- var grid = new Ext.grid.Grid('center-center', {
- ds: ds,
- cm: colModel,
- autoExpandColumn:'title'
- });
- grid.render();
- grid.getSelectionModel().selectFirstRow();
- innerLayout.add('center', new Ext.GridPanel(grid));
- innerLayout.add('south', new Ext.ContentPanel('center-south'));
- layout.add('north', new Ext.ContentPanel('north-div'));
- layout.add('west', new Ext.ContentPanel('west-div',{fitToFrame:true,resizeEl:'treelist'}));
- layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
- layout.add('south', new Ext.ContentPanel('south-div'));
- layout.restoreState();
- layout.endUpdate();
- layout.getRegion('west').on('collapsed',function(region){
- region.collapsedEl.dom.style.background="url(../p_w_picpaths/treelist.gif) center no-repeat";
- },this);
- var tree=new Ext.tree.TreePanel('treelist',{
- animate:true
- });
- var root = new Ext.tree.TreeNode({
- text: '文件夾',
- allowDrag:false,
- allowDrop:false
- });
- tree.setRootNode(root);
- root.appendChild(
- new Ext.tree.TreeNode({text:'收件箱',allowDrag:false}),
- new Ext.tree.TreeNode({text:'發件箱',allowDrag:false}),
- new Ext.tree.TreeNode({text:'聯系人',allowDrag:false}),
- new Ext.tree.TreeNode({text:'已刪除的郵件',allowDrag:false})
- );
- tree.render();
- root.expand();
- function onItemClick(item){
- alert(item.text);
- }
- })
- </script>
- </body>
- </html>
其最終效果如圖4。
圖4
本例文件是附件中的examples/layout/ NestedLayoutPanel.html。
9. 小結
本文章主要介紹了BorderLayout、LayoutRegion、contentPanel、NestedLayoutPanel和GridPanel等5個常用的布局類，還寫了一些簡單的例子。希望通過這些簡單的介紹和例子，我們能通過靈活的組合這些類，創建出自己需要，當然也是用戶喜歡的用戶界面。在布局類中還有兩個類：LayoutManager和ReaderLayout。LayoutManager是BorderLayout的基類，主要是定義布局的一些常用屬性、方法和事件。而ReaderLayout是BorderLayout的一個子類，它定義好了一個有5個面板的布局，組成為north區域、兩個NestedLayoutPanel（一個頂部的listview和底部的preview）組成的center區域和一個用來導航、進行應用控制、信息顯示的區域，它的定義和創建與BorderLayout是一樣的。有興趣的讀者可以自己查看Ext的API文檔進行研究。
本文例程下載：http://download.csdn.net/source/241226
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
