Ext布局类的介绍与使用

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:'发送人',100,sortable:true,dataIndex:'sender'},

                     {id:'title',header:'标题', 100,sortable:true,dataIndex:'title'},

                     {header:'发送时间',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