Ext布局类的介绍与使用

Ext布局类的介绍与使用

在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的定义参数。