|
|
在WEB應用的開發中，應用界面的布局設計是一項很重要的內容。在EXT中，可以通過BorderLayout與NestedLayoutPanel很方便的設計出各種的布局。本文章的主要內容主要是介紹如何通過BorderLayout、NestedLayoutPanel以及各種面板設計頁面布局。
<!--[if !supportLists]-->1. <!--[endif]-->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
|
<!--[if !supportLists]-->2. <!--[endif]-->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
|
<!--[if !supportLists]-->3. <!--[endif]-->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
|
<!--[if !supportLists]-->4. <!--[endif]-->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
|
<!--[if !supportLists]-->5. <!--[endif]-->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
|
<!--[if !supportLists]-->6. <!--[endif]-->一個簡單的例子
通過上面幾節的介紹，我們認識了創建布局的基本類。下面，我們將通過一個簡單的例子來學習如何實現一個布局。
本例子的布局是我們通常用到的應用程序布局，頂部是一個菜單條，中間顯示內容，底部是狀態條，請看圖1。
<!--[if !vml]--> <!--[endif]-->
|
圖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。
雖然我們<!--[if !vml]--> <!--[endif]-->定義和創建了布局，但是目前在頁面我們是看不到任何效果的，我們還需要為布局的每個區域加入面板并執行刷新：
|
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。
|
<!--[if !vml]--> <!--[endif]-->
|
|
圖2
|
<!--[if !supportLists]-->7. <!--[endif]-->為簡單的例子增加內容
上面一節我們制作了一個簡單的例子，但是沒有內容，那么如何加入內容呢？最簡單的辦法就是在面板綁定容器中直接加入內容。例如在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。
<!--[if !supportLists]-->8. <!--[endif]-->一個NestedLayoutPanel和GridPanel的例子
我們已經可以用BorderLayout和ContentPanel建立簡單的布局了，這節我們將用NestedLayPanel和GridPanel創建復雜一點的布局。
布局整體情況如圖3。
|
<!--[if !vml]--> <!--[endif]-->
|
|
圖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-image:url(images/yourbackgroundfile.gif);
background-repeat:no-repeat;
background-position:center;
}
.x-layout-collapsed-east{
background-image:url(images/ 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(../images/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(../images/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。
|
<!--[if !vml]--> <!--[endif]-->
|
|
圖4
|
本例文件是附件中的examples"layout" NestedLayoutPanel.html。
<!--[if !supportLists]-->9. <!--[endif]-->小結
本文章主要介紹了BorderLayout、LayoutRegion、contentPanel、NestedLayoutPanel和GridPanel等5個常用的布局類，還寫了一些簡單的例子。希望通過這些簡單的介紹和例子，我們能通過靈活的組合這些類，創建出自己需要，當然也是用戶喜歡的用戶界面。在布局類中還有兩個類：LayoutManager和ReaderLayout。LayoutManager是BorderLayout的基類，主要是定義布局的一些常用屬性、方法和事件。而ReaderLayout是BorderLayout的一個子類，它定義好了一個有5個面板的布局，組成為north區域、兩個NestedLayoutPanel（一個頂部的listview和底部的preview）組成的center區域和一個用來導航、進行應用控制、信息顯示的區域，它的定義和創建與BorderLayout是一樣的。有興趣的讀者可以自己查看Ext的API文檔進行研究。
|