菠萝三国

大江东去,浪淘尽...
随笔 - 33, 文章 - 46, 评论 - 6, 引用 - 0
数据加载中……

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

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