小菜毛毛技术分享

与大家共同成长

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  164 Posts :: 141 Stories :: 94 Comments :: 0 Trackbacks

Ext布局类的介绍与使用

 

WEB应用的开发中,应用界面的布局设计是一项很重要的内容。在EXT中,可以通过BorderLayoutNestedLayoutPanel很方便的设计出各种的布局。本文章的主要内容主要是介绍如何通过BorderLayoutNestedLayoutPanel以及各种面板设计页面布局。
 
1.     BorderLayout
BorderLayout类是布局中的最基本的单元,它已预设了south east west northcenter5个区域。你可以根据你的需要任意组合这些区域,但是要注意的一点就是,center区域是必须使用的,而且center区域不允许隐藏和折叠

创建一个新布局的语句如下:

 

new BorderLayout( String/HTMLElement/Element container, Object config )

 

其参数分别是:

container

绑定布局的容器。绑定布局的容易可以是docume.body,也可以是其它HTMLElement。不过如果是其它HTMLElement,该HTMLElement不能是绝对定位的,或者要在该HTMLElement中加入css定义“position:relative”,还需要为该HTMLElement设置大小。

config

布局区域的划分与定义。主要是对northsouthcentereastwest五个区域就行定义。区域的定义请参考LayoutRegion类的定义参数。

 
BorderLayout类常用的属性、方法与事件如表1
属性
monitorWindowResize
如果设置为发绿色,则不检测窗口大小的改变。默认值为true
方法
add
增加一个内容面板(或子类)到某个区域。
定义:public function add( String target, Ext.ContentPanel panel )
参数:
target目标区域的关键字(northsouth east west center
panel:要增加的面板类
返回:Ext.ContentPanel
addRegion
增加一个不存在的区域。
定义:public function addRegion( String target, Object config )
参数:
target目标区域的关键字(northsouth 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目标区域的关键字(northsouth east west center
返回:Ext.LayoutRegion
remove
从某个区域中移除一个内容面板(或子类)。
定义:public function remove( String target, Number/String/Ext.ContentPanel panel )
参数:
target目标区域的关键字(northsoutheast 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.ContentPanelnull
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
传递参数:
thisExt.LayoutRegion
panelExt.ContentPanel
e取消事件对象
collapsed
当该区域被折叠是触发本事件。
传递参数:
this : Ext.LayoutRegion
expanded
当该区域被展开是触发本事件。
传递参数:
this : Ext.LayoutRegion
invalidated
当该区域在布局中改变时触发本时间。
传递参数:
this : Ext.LayoutRegion
panelactivated
当该区域中某个面板成为活动面板时触发本事件。
传递参数:
thisExt.LayoutRegion
panelExt.ContentPanel
paneladded
当该区域中增加面板时触发本事件。
传递参数:
thisExt.LayoutRegion
panelExt.ContentPanel
panelremoved
当该区域中删除面板时触发本事件。
传递参数:
thisExt.LayoutRegion
panelExt.ContentPanel
resized
当用户改变区域大小时触发本事件。
传递参数:
thisExt.LayoutRegion
newSize新的宽度(east/west)或高度(north/south
visibilitychange
当该区域显示状态改变时触发本事件。
传递参数:
thisExt.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

northsouth区域折叠时显示的信息。

collapsible

如果设置为false,则不允许折叠。缺省值为true

disableTabTips

如果设置为true,则屏蔽标签提示信息。默认值为false

duration 

设置展开和折叠区域时的动画效果时间长度。默认值是0.3

floatable

如果设置为false,则不允许浮动。默认值为true

hidden

如果设置为true,则区域初始化为隐藏状态。默认值为false

hideTabs

如果设置为true,则不显示标签。默认值为false

hideWhenEmpty

如果设置为true,则当该区域没有面板的时候隐藏区域。

initialSize

设置该区域的初始大小。northsouth是高度,eastwest为宽度,center如果是上下分区则设置高度,如果是左右分区则是宽度。

margins

设置对象四边的外延边距。默认值是{top: 0, left: 0, right:0, bottom: 0}

maxSize

设置该区域的最大尺寸。northsouth是高度,eastwest为宽度,center如果是上下分区则设置高度,如果是左右分区则是宽度。

minSize

设置该区域的最小尺寸。northsouth是高度,eastwest为宽度,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

绑定面板的容器。可以是HTMLElementidHTMLElement本身或者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
如果面板定义fitToFrametrue,则当面板改变大小时触发该事件
传递参数:
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,则面板会根据区域的变化自动调整面板大小。也可通过设置fitToFrameresizeEl实现该功能。默认值为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
如果面板定义fitToFrametrue,则当面板改变大小时触发该事件
传递参数:
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,则面板会根据区域的变化自动调整面板大小。也可通过设置fitToFrameresizeEl实现该功能。默认值为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
如果面板定义fitToFrametrue,则当面板改变大小时触发该事件
传递参数:
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,则面板会根据区域的变化自动调整面板大小。也可通过设置fitToFrameresizeEl实现该功能。默认值为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个区域,所以我们需要写3HTML 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,定义了nothcentersouth三个区域。north区域包含一个工具条,高度是28center区域设置了总是显示标签栏,标签位置在顶部。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>

 

    但是我们的应用通常是动态加载数据的,那怎么办呢?其实很简单,就是利用ContentPanelsetContent方法和setUrl方法加载。setContent方法就是直接从JavaScipt程序中插入HTMLsetUrl方法则允许您从服务端得到数据加入ContentPanel中。

下面我们先测试一下setContent方法。我们要做的就是当菜单选择了一个item的时候将选择的item的文本显示在状态栏里。我们将例子中菜单单击的事件修改如下:

 

      function onItemClick(item){

             layout.getRegion('south').getPanel('south-div').setContent(item.text);

      }

 

   为了调用setContent方法,我们首先要找到对应的面板,如何找到对应的面板呢?上面的代码就是通过“layout.getRegion('south')”先找到状态栏对应的区域south,然后通过面板的idsouth-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.     一个NestedLayoutPanelGridPanel的例子

我们已经可以用BorderLayoutContentPanel建立简单的布局了,这节我们将用NestedLayPanelGridPanel创建复杂一点的布局。

布局整体情况如图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>

 

    从源代码中我们可以看到大布局分了northwestcentersouth四个区域west区包含一个treelistdiv,准备作为树列表的容器。而在center区域,我们又细分成centersouth两个内部区域,这里就要使用到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:'内容'
               }
               });

 

从代码中,我们看到northsouth的定义与简单的例子一样。而west区域,我们定义了它的原始大小(initialSize)为200,带标题栏(titlebar: true),标题栏显示“树列表”,可折叠(collapsible: true),带分割控制条(split:true),通过分割控制条调整区域大小的最小宽度是100,最大宽度是400。而ccenter区域则什么也没定义。

为了在center区域再划分出两个区域,我们需要新创建一个Ext.BorderLayout布局,设置其容器为“center-div”,在布局中定义centersouth两个区域。center区域显示标题栏,标题为“条目列表”。south区域定义了它的原始大小(initialSize)为200,带标题栏(titlebar: true),标题栏显示“内容”,可折叠(collapsible: true),带分割控制条(split:true),通过分割控制条调整区域大小的最小宽度是100,最大宽度是400,折叠后的折叠栏标题显示“内容”。

我们注意到,west区域并没有设置折叠后的显示标题,为什么呢?其原因是west区域折叠后是垂直折叠条,而目前的HTML没有提供对一个元素的90度的旋转,所以我们只能通过修改其背景图的方式来实现。实现的方法有两种,一种是通过重新定义westeastcss定义来实现,一种是通过事件利用脚本实现。虽然通过重新定义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)))。southwestnorth区域的添加代码和简单的例子没什么不同,而不同的地方就是center主区域代码的添加,不再是contentPanel,而是NestedLayoutPanel了,而其参数是一个BorderLayoutinnerLayout

我们再为例子加上一个树列表就完成了这个例子了。树列表的定义与创建也会有专门的文章说明,所以我也不在这里具体说了。

一个完整的NestedLayoutPanelGridPanel例子代码如下:

 

<!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.     小结

本文章主要介绍了BorderLayoutLayoutRegioncontentPanelNestedLayoutPanelGridPanel5个常用的布局类,还写了一些简单的例子。希望通过这些简单的介绍和例子,我们能通过灵活的组合这些类,创建出自己需要,当然也是用户喜欢的用户界面。在布局类中还有两个类:LayoutManagerReaderLayoutLayoutManagerBorderLayout的基类,主要是定义布局的一些常用属性、方法和事件。而ReaderLayoutBorderLayout的一个子类,它定义好了一个有5个面板的布局,组成为north区域、两个NestedLayoutPanel(一个顶部的listview和底部的preview)组成的center区域和一个用来导航、进行应用控制、信息显示的区域,它的定义和创建与BorderLayout是一样的。有兴趣的读者可以自己查看ExtAPI文档进行研究。

 

  本文例程下载:http://download.csdn.net/source/241226
posted on 2009-05-05 14:54 小菜毛毛 阅读(1100) 评论(0)  编辑  收藏 所属分类: EXTJS

只有注册用户登录后才能发表评论。


网站导航: