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-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。
|
|
|
图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
|