Ext布局类的介绍与使用
2007-09-03 14:58
302 查看
Ext布局类的介绍与使用
在WEB应用的开发中,应用界面的布局设计是一项很重要的内容。在EXT中,可以通过B[code]orderLayout
与NestedLayoutPanel很方便的设计出各种的布局。本文章的主要内容主要是介绍如何通过B
orderLayout
、NestedLayoutPanel以及各种面板设计页面布局。[/code]
1.B[code]orderLayout
类[/code]
B[code]orderLayout
类是布局中的最基本的单元,它已预设了south、east、west、north和center等5个区域。你可以根据你的需要任意组合这些区域,但是要注意的一点就是,center区域是必须使用的,而且center区域不允许隐藏和折叠。[/code]
创建一个新布局的语句如下:
newBorderLayout(String/HTMLElement/Elementcontainer,Objectconfig) |
container: | 绑定布局的容器。绑定布局的容易可以是docume.body,也可以是其它HTMLElement。不过如果是其它 HTMLElement,该 HTMLElement不能是绝对定位的,或者要在该 HTMLElement中加入css定义“position:relative”,还需要为该 HTMLElement设置大小。 |
config: | 布局区域的划分与定义。主要是对north、south、center、east和west五个区域就行定义。区域的定义请参考LayoutRegion 类的定义参数。 |
B[code]orderLayout
类常用的属性、方法与事件如表1。
属性 | |
monitorWindowResize | 如果设置为发绿色,则不检测窗口大小的改变。默认值为true。 |
方法 | |
add | 增加一个内容面板(或子类)到某个区域。 定义:publicfunctionadd(Stringtarget,Ext.ContentPanelpanel) 参数: target:目标区域的关键字(north、south、east、west或center)[/code] panel:要增加的面板类 返回:Ext.ContentPanel |
addRegion | 增加一个不存在的区域。 定义:publicfunctionaddRegion(Stringtarget,Objectconfig) 参数: target:目标区域的关键字(north、south、east、west或center)[/code] config:区域定义对象。 返回:BorderLayoutRegion |
beginUpdate | 暂时停止LayoutManager的自动布局管理。[/code] 定义:p[code]ublicfunctionbeginUpdate() 参数:无 返回:void |
endUpdate | 恢复LayoutManager的自动管理同时结束更新。[/code] 定义:[code]publicfunctionendUpdate(BooleannoLayout) 参数: noLayout:如果为true则不进行布局更新。默认值为false。 返回:void |
findPanel | 通过id查找区域内的面板。 定义:publicfunctionfindPanel(StringpanelId) 参数: panelId:面板id。 返回:Ext.ContentPanel或者null(没有找到)。 |
getEl | 返回绑定布局的元件。 定义:publicfunctiongetEl() 参数:无 返回:Ext.Element |
getRegion | 根据关键字返回指定的区域。 定义:publicfunctiongetRegion(Stringtarget) 参数: target:目标区域的关键字(north、south、east、west或center)[/code] 返回:[code]Ext.LayoutRegion |
remove | 从某个区域中移除一个内容面板(或子类)。 定义:publicfunctionremove(Stringtarget,Number/String/Ext.ContentPanelpanel) 参数: target:目标区域的关键字(north、south、east、west或center)[/code] panel:要移除面板的索引值、id或者对象本身。 返回:Ext.ContentPanel |
restoreState | 使用Ext.state.Manager或者状态提供者重建布局。[/code] 定义:[code]publicfunctionrestoreState([ Ext.state.Providerprovider] ) 参数: provider:Ext.state.Provider(可选)[/code] 返回:void[code] |
showPanel | 设置某个面板为当前活动面板。 定义:publicfunctionshowPanel(String/ContentPanelpanelId) 参数: panelId:要设置的面板id或对象本身。 返回:Ext.ContentPanel或者null(面板不存在) |
事件 | |
regioncollapsed | 当一个区域折叠的时候触发本事件。 传递参数: region:Ext.LayoutRegion(折叠的区域对象) |
regionexpanded | 当一个区域展开的时候触发本事件。 传递参数: region:Ext.LayoutRegion(展开的区域对象) |
regionresized | 当用户改变区域大小的时候触发本事件。 传递参数: region:Ext.LayoutRegion(改变大小的区域对象)[/code] 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 | 增加一个内容面板(或子类)到该区域。 定义:publicfunctionadd(ContentPanel...panel) 参数: panel:要增加的面板,可以是多个。 返回:Ext.ContentPanel,如果只增加一个,则返回增加的面板对象,否则返回null。 |
collapses[code] | 折叠该区域。 定义:publicfunctioncollapse([ BooleanskipAnim] ) 参数: skipAnim:如果为true则在折叠区域时不显示动态效果(如果animate设置为true ),可选参数。 返回:void |
expand | 展开该区域、 定义:[code]publicfunctionexpand(Ext.EventObjecte,[ BooleanskipAnim] ) 参数: e:触发展开区域的事件,如果手动调用则设置null。 skipAnim:如果为true则在展开区域时不显示动态效果(如果animate设置为true ),可选参数。 返回:void |
getActivePanel | 获取当前为活动状态的面板。 定义[code]publicfunctiongetActivePanel() 参数:无 返回:Ext.ContentPanel或null |
getEl | 返回该区域的容器元件。 定义:publicfunctionfindPanel(StringpanelId) 参数:无 返回:Ext. Element |
getPanel | 根据面板的索引、id或对象本身返回面板。 定义:publicfunctiongetPanel(Number/String/ContentPanelpanel) 参数: Panel:面板的索引、id或对象本身 返回:Ext.ContentPanel |
getPosition | 返回该区域的位置(north/south/east/west/center) 。 定义:publicfunctiongetPosition() 参数:无 返回:[code]String |
getTabs | 返回该区域中的tab面板。 定义:publicfunctiongetTabs() 参数:无 返回:Ext.TabPanel |
hasPanel | 检查某个面板是否在该区域。 定义:[code]publicfunctionhasPanel(Number/String/ContentPanelpanel) 参数: panel: 面板的索引、id或对象本身 返回:[code]Boolean |
hide | 隐藏该面板。 定义:publicfunctionhide() 参数:无 返回:void |
hidePanel | 根据面板的索引、id或对象本身隐藏面板。 定义:publicfunctiongetPanel(Number/String/ContentPanelpanel) 参数: Panel:面板的索引、id或对象本身 返回:void |
isVisible | 检查该区域是否可见的。 定义:publicfunctionisVisible() 参数:无 返回:Boolean,如果该区域可见返回true |
remove | 从该区域中移除一个面板。 定义:publicfunctionremove(Number/String/Ext.ContentPanelpanel) 参数: panel:要移除面板的索引值、id或者对象本身。 返回:Ext.ContentPanel |
resizeTo | 调整区域大小。如果是垂直区域(west,east)则调整宽度,如果是水平区域(north,south)则调整高度。[/code] 定义:publicfunctionresizeTo(NumbernewSize) 参数: newSize:新的宽度或高度[/code] 返回:void[code] |
setCollapsedTitle | 设置north/south区域折叠时的标题(可通过定义 collapsedTitle参数设置)。[/code] 定义:publicfunctionsetCollapsedTitle([ Stringtitle] ) 参数: title:可选参数,标题文本可以是HTML标记[/code] 返回:void[code] |
show | 显示该区域。 定义:publicfunctionshow() 参数:无 返回:void[code] |
showPanel | 显示该区域中某个面板。 定义:publicfunctionshowPanel(Number/String/ContentPanelpanelId) 参数: panelId:要显示面板的索引值、id或者对象本身。 返回:[code]Ext.ContentPanel |
unhidePanel | 显示被隐藏了的面板的标签。 定义:publicfunctionunhidePanel(Number/String/ContentPanelpanel) 参数: panelId:要显示面板的索引值、id或者对象本身。 返回:[code]void |
事件 | |
beforeremove | 当一个面板被移动或关闭时出发本事件。如果要取消该操作,请在事件中设置:e.cancel=true 传递参数: this:Ext.LayoutRegion[/code] panel:Ext.ContentPanel e:[code]取消事件对象 |
collapsed | 当该区域被折叠是触发本事件。 传递参数: this:Ext.LayoutRegion |
expanded | 当该区域被展开是触发本事件。 传递参数: this:Ext.LayoutRegion |
invalidated | 当该区域在布局中改变时触发本时间。 传递参数: this:Ext.LayoutRegion |
panelactivated | 当该区域中某个面板成为活动面板时触发本事件。 传递参数: this:Ext.LayoutRegion[/code] panel:Ext.ContentPanel[code] |
paneladded | 当该区域中增加面板时触发本事件。 传递参数: this:Ext.LayoutRegion[/code] panel:Ext.ContentPanel[code] |
panelremoved | 当该区域中删除面板时触发本事件。 传递参数: this:Ext.LayoutRegion[/code] panel:Ext.ContentPanel[code] |
resized | 当用户改变区域大小时触发本事件。 传递参数: this:Ext.LayoutRegion[/code] newSize:新的宽度(east/west)或高度(north/south) |
visibilitychange | 当该区域显示状态改变时触发本事件。 传递参数: this:Ext.LayoutRegion[/code] 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}oreast/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,则会自动设置标签的大小,这将会根据标签栏的空间自动调整所有标签到相同的大小,类似于FireFox1.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类。
创建一个新面板的语句如下:
newContentPanel( String/HTMLElement/Ext.Elementel, String/Objectconfig,[ Stringcontent]) |
el: | 绑定面板的容器。可以是HTMLElement 的id,HTMLElement本身或者Ext.Element。 |
config: | 面板的定义。可以是字符类型(只设置面板标题),也可以是一个定义参数对象,定义参数请参阅表3的定义参数。 |
Content | 可选参数,字符类型,设置这个面板的HTML内容。 |
ContentPanel[code]类常用的属性、方法、事件和定义参数
如表3。
属性 | |
该类没有公共属性。 | |
方法 | |
destroy | 清除面板。。 定义:publicfunctiondestroy() 参数:无 返回:void |
getEl | 返回该面板的元件。 定义:publicfunctiongetEl() 参数:无 返回:Ext.Element |
getId | 返回该面板的id 定义:publicfunctiongetId() 参数:无 返回:[code]字符串 |
getTitle | 返回该面板的标题 定义:publicfunctiongetTitle() 参数:无 返回:[code]字符串 |
getToolbar | 返回该面板设置的工具条。 定义:publicfunctiongetToolbar() 参数:无 返回:[code]Ext.Toolbar |
getUpdateManager | 返回该面板的更新管理器,从而进行Ajax更新。 定义:publicfunctiongetUpdateManager() 参数:无 返回:[code]Ext.UpdateManager |
isClosable | 返回该面板是否设置了关闭图标,允许关闭。 定义:publicfunctionisClosable() 参数:无 返回:[code]布尔值。 |
load | 从XHR立即加载面板的内容。注意:如果要面板被激活时才加载内容,请使用setUrl方法。 定义:publicfunctionload(Object/String/Functionurl,[ String/Objectparams] ,[ Functioncallback] ,[ BooleandiscardUrl] ) 参数: url:请求返回内容的页面地址。可以是单独的地址字符串,也可以是一个定义对象,或者是一个函数。 params:要提交的url的参数。可选参数。 callback:回调函数。当传输完成后,执行该函数。可选。函数返回三个参数:oElement(对象本身)、bSuccess(是否传输成功)、oResponse(提交后返回的内容)。[/code] discardUrl:布尔值。可选。默认情况下,如果你执行一个更新后,默认url将会被修改。如果该参数设置为true,则不修改默认url。 返回:[code]Ext.ContentPanel |
refresh | 强制面板通过setUrl方法更新内容。如果没有调用setUrl方法,该方法将不执行。该方法不需要面板为活动面板时才更新内容。 定义:publicfunctionrefresh() 参数:无 返回:void |
setContent | 设置面板内容。 定义:publicfunctionsetContent(Stringcontent,[ BooleanloadScripts] ) 参数: content:面板内容。 loadScripts:如果设置为true,则在content寻找脚本并执行。可选参数。 返回:void |
setTitle | 设置面板标题。 定义:publicfunctionsetTitle(Stringtitle) 参数: title:面板标题。 返回:void |
setUrl | 设置url以便面板加载内容。当面板是活动面板时,内容将自动从URL加载内容。 定义:publicfunctionsetUrl(String/Functionurl,[ String/Objectparams] ,[ BooleanloadOnce] ) 参数: 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(触发事件的面板对象)[/code] width:面板调整大小后的宽度 height:面板调整大小后的高度 |
面板定义参数 | |
adjustments | 当执行fitToFrame时增加的宽度和高度,默认值是[0,0] |
autoCreate | 如果设置为true,则自动为该面板产生DOMelement或者由Ext.DomHelper配置的element被创建。 |
autoScroll | 如果设置为true,则当显示内容超出面板显示区域时显示滚动条,默认值为true。要配合fitToFrame使用。[code] |
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的语句如下:
newNestedLayoutPanel( Ext.BorderLayoutlayout,String/Objectconfig) |
layout: | 要绑定该面板布局。 |
config: | 面板的定义。可以是字符类型(只设置面板标题),也可以是一个定义参数对象,定义参数请参阅表4的定义参数。 |
NestedLayoutPanel[code]类常用的属性、方法、事件和定义参数
如表3。
属性 | |
该类没有公共属性。 | |
方法 | |
destroy | 清除面板。。 定义:publicfunctiondestroy() 参数:无 返回:void |
getEl | 返回该面板的元件。 定义:publicfunctiongetEl() 参数:无 返回:Ext.Element |
getId | 返回该面板的id 定义:publicfunctiongetId() 参数:无 返回:[code]字符串 |
getLayout | 返回该面板的内部布局对象。 定义:publicfunctiongetTitle() 参数:无 返回:[code]Ext.BorderLayout |
getTitle | 返回该面板的标题 定义:publicfunctiongetTitle() 参数:无 返回:[code]字符串 |
getToolbar | 返回该面板设置的工具条。 定义:publicfunctiongetToolbar() 参数:无 返回:[code]Ext.Toolbar |
getUpdateManager | 返回该面板的更新管理器,从而进行Ajax更新。 定义:publicfunctiongetUpdateManager() 参数:无 返回:[code]Ext.UpdateManager |
isClosable | 返回该面板是否设置了关闭图标,允许关闭。 定义:publicfunctionisClosable() 参数:无 返回:[code]布尔值。 |
load | 从XHR立即加载面板的内容。注意:如果要面板被激活时才加载内容,请使用setUrl方法。 定义:publicfunctionload(Object/String/Functionurl,[ String/Objectparams] ,[ Functioncallback] ,[ BooleandiscardUrl] ) 参数: url:请求返回内容的页面地址。可以是单独的地址字符串,也可以是一个定义对象,或者是一个函数。 params:要提交的url的参数。可选参数。 callback:回调函数。当传输完成后,执行该函数。可选。函数返回三个参数:oElement(对象本身)、bSuccess(是否传输成功)、oResponse(提交后返回的内容)。[/code] discardUrl:布尔值。可选。默认情况下,如果你执行一个更新后,默认url将会被修改。如果该参数设置为true,则不修改默认url。 返回:[code]Ext.ContentPanel |
refresh | 强制面板通过setUrl方法更新内容。如果没有调用setUrl方法,该方法将不执行。该方法不需要面板为活动面板时才更新内容。 定义:publicfunctionrefresh() 参数:无 返回:void |
setContent | 设置面板内容。 定义:publicfunctionsetContent(Stringcontent,[ BooleanloadScripts] ) 参数: content:面板内容。 loadScripts:如果设置为true,则在content寻找脚本并执行。可选参数。 返回:void |
setTitle | 设置面板标题。 定义:publicfunctionsetTitle(Stringtitle) 参数: title:面板标题。 返回:void |
setUrl | 设置url以便面板加载内容。当面板是活动面板时,内容将自动从URL加载内容。 定义:publicfunctionsetUrl(String/Functionurl,[ String/Objectparams] ,[ BooleanloadOnce] ) 参数: 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(触发事件的面板对象)[/code] width:面板调整大小后的宽度 height:面板调整大小后的高度 |
面板定义参数 | |
adjustments | 当执行fitToFrame时增加的宽度和高度,默认值是[0,0] |
autoCreate | 如果设置为true,则自动为该面板产生DOMelement或者由Ext.DomHelper配置的element被创建。 |
autoScroll | 如果设置为true,则当显示内容超出面板显示区域时显示滚动条,默认值为true。要配合fitToFrame使用。[code] |
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的语句如下:
newpublicfunctionGridPanel(Ext.grid.Gridgrid,String/Objectconfig) |
grid: | 要放置的表格。Ext.grid.Grid表格类。 |
config: | 面板的定义。可以是字符类型(只设置面板标题),也可以是一个定义参数对象,定义参数请参阅表3的定义参数。 |
GridPanel[code]类常用的属性、方法、事件和定义参数
如表4。
属性 | |
该类没有公共属性。 | |
方法 | |
destroy | 清除面板。。 定义:publicfunctiondestroy() 参数:无 返回:void |
getEl | 返回该面板的元件。 定义:publicfunctiongetEl() 参数:无 返回:Ext.Element |
getGrid | 返回该面板的表格。 定义:publicfunctiongetGrid() 参数:无 返回:[code]Ext.grid.Grid |
getId | 返回该面板的id 定义:publicfunctiongetId() 参数:无 返回:[code]字符串 |
getTitle | 返回该面板的标题 定义:publicfunctiongetTitle() 参数:无 返回:[code]字符串 |
getToolbar | 返回该面板设置的工具条。 定义:publicfunctiongetToolbar() 参数:无 返回:[code]Ext.Toolbar |
getUpdateManager | 返回该面板的更新管理器,从而进行Ajax更新。 定义:publicfunctiongetUpdateManager() 参数:无 返回:[code]Ext.UpdateManager |
isClosable | 返回该面板是否设置了关闭图标,允许关闭。 定义:publicfunctionisClosable() 参数:无 返回:[code]布尔值。 |
load | 从XHR立即加载面板的内容。注意:如果要面板被激活时才加载内容,请使用setUrl方法。 定义:publicfunctionload(Object/String/Functionurl,[ String/Objectparams] ,[ Functioncallback] ,[ BooleandiscardUrl] ) 参数: url:请求返回内容的页面地址。可以是单独的地址字符串,也可以是一个定义对象,或者是一个函数。 params:要提交的url的参数。可选参数。 callback:回调函数。当传输完成后,执行该函数。可选。函数返回三个参数:oElement(对象本身)、bSuccess(是否传输成功)、oResponse(提交后返回的内容)。[/code] discardUrl:布尔值。可选。默认情况下,如果你执行一个更新后,默认url将会被修改。如果该参数设置为true,则不修改默认url。 返回:[code]Ext.ContentPanel |
refresh | 强制面板通过setUrl方法更新内容。如果没有调用setUrl方法,该方法将不执行。该方法不需要面板为活动面板时才更新内容。 定义:publicfunctionrefresh() 参数:无 返回:void |
setContent | 设置面板内容。 定义:publicfunctionsetContent(Stringcontent,[ BooleanloadScripts] ) 参数: content:面板内容。 loadScripts:如果设置为true,则在content寻找脚本并执行。可选参数。 返回:void |
setTitle | 设置面板标题。 定义:publicfunctionsetTitle(Stringtitle) 参数: title:面板标题。 返回:void |
setUrl | 设置url以便面板加载内容。当面板是活动面板时,内容将自动从URL加载内容。 定义:publicfunctionsetUrl(String/Functionurl,[ String/Objectparams] ,[ BooleanloadOnce] ) 参数: 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(触发事件的面板对象)[/code] width:面板调整大小后的宽度 height:面板调整大小后的高度 |
面板定义参数 | |
adjustments | 当执行fitToFrame时增加的宽度和高度,默认值是[0,0] |
autoCreate | 如果设置为true,则自动为该面板产生DOMelement或者由Ext.DomHelper配置的element被创建。 |
autoScroll | 如果设置为true,则当显示内容超出面板显示区域时显示滚动条,默认值为true。要配合fitToFrame使用。[code] |
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作为布局的容器的,所以不需要为布局写一个HTMLElement作为容器。布局包含3个区域,所以我们需要写3个HTMLElement作为布局每个区域的容器:
<divid="north-div"></div> <divid="center-div">内容</div> <divid="south-div">状态栏</div> |
el
的值。
下面开始撰写创建布局的javascript代码。首先是创建一个布局,并定义各区域的参数:
vartb=newExt.Toolbar('north');//创建一个工具条 tb.add(newExt.Toolbar.SplitButton({ text:'文件', cls:'x-btn-text-iconblist', menu:{items:[ {text:'新建',handler:onItemClick}, {text:'保存',handler:onItemClick} ]}}), newExt.Toolbar.MenuButton({ text:'编辑', cls:'x-btn-text-iconblist', menu:{items:[ {text:'复制',handler:onItemClick}, {text:'粘贴',handler:onItemClick} ]}}) ); varlayout=newExt.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',newExt.ContentPanel('north-div')); layout.add('center',newExt.ContentPanel('center-div','简单的布局例子')); layout.add('south',newExt.ContentPanel('south-div')); layout.restoreState(); layout.endUpdate(); |
首先是通过beginUpdate方法中止LayoutManager的自动布局管理,然后给各区域加入一个面板。在增加center面板时,还增加了一个标题,该标题会作为标签的文本显示。然后通过restoreState方法重建布局。最后是通过endUpdate方法在[code]恢复LayoutManager自动管理同时结束更新。这样,一个简单的布局就出来。全部代码如下:[/code]
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>简单的布局例子</title> <metahttp-equiv="content-type"content="text/html;charset=utf-8"> <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"> </head> <bodyscroll="no"> <scripttype="text/javascript"src="../../adapter/ext/ext-base.js"></script> <scripttype="text/javascript"src="../../ext-all.js"></script> <scripttype="text/javascript"src="../../ext-lang-zh_CN.js"></script> <divid="north-div"></div> <divid="center-div">内容</div> <divid="south-div">状态栏</div> <script> Ext.onReady(function(){ vartb=newExt.Toolbar('north-div');//创建一个工具条 tb.add(newExt.Toolbar.SplitButton({ text:'文件', cls:'x-btn-text-iconblist', menu:{items:[ {text:'新建',handler:onItemClick}, {text:'保存',handler:onItemClick}, {text:'加载',handler:onItemClick} ]}}), newExt.Toolbar.MenuButton({ text:'编辑', cls:'x-btn-text-iconblist', menu:{items:[ {text:'复制',handler:onItemClick}, {text:'粘贴',handler:onItemClick} ]}}) ); varlayout=newExt.BorderLayout(document.body,{ north:{toolbar:tb,initialSize:28}, center:{alwaysShowTabs:true,tabPosition:'top'}, south:{initialSize:28} }); layout.beginUpdate(); layout.add('north',newExt.ContentPanel('north-div')); layout.add('center',newExt.ContentPanel('center-div','简单的布局例子')); layout.add('south',newExt.ContentPanel('south-div')); layout.restoreState(); layout.endUpdate(); functiononItemClick(item){ alert(item.text); } }) </script> </body> </html> |
最终效果如图2。本例文件是附件中的examples/layout/simple.html。
图2 |
7.
为简单的例子增加内容
上面一节我们制作了一个简单的例子,但是没有内容,那么如何加入内容呢?最简单的办法就是在面板绑定容器中直接加入内容。例如在center-div中我们加入了“内容”,在south-div中加入了“状态栏”:
<divid="center-div">内容</div> <divid="south-div">状态栏</div> |
下面我们先测试一下setContent方法。我们要做的就是当菜单选择了一个item的时候将选择的item的文本显示在状态栏里。我们将例子中菜单单击的事件修改如下:
functiononItemClick(item){ layout.getRegion('south').getPanel('south-div').setContent(item.text); } |
varcenterContent=newExt.ContentPanel('center-div','简单的布局例子'); layout.add('center',centerContent); |
functiononItemClick(item){ layout.getRegion('south').getPanel('south-div').setContent(item.text); if(item.text=='加载'){ centerContent.setUrl('content.html','',true); centerContent.refresh(); } } |
varcenterContent=newExt.ContentPanel('center-div',{title:'简单的布局例子',fitToFrame:true,autoScroll:true}); |
//center-div修改如下: <divid="center-div"><iframeid="center-iframe"frameborder="0"scrolling="auto"style="border:0pxnone;"></iframe></div> 代码修改如下: varcenterContent=newExt.ContentPanel('center-div',{title:'简单的布局例子',fitToFrame:true,autoScroll:true,resizeEl:'center-iframe'}); functiononItemClick(item){ layout.getRegion('south').getPanel('south-div').setContent(item.text); if(item.text=='加载'){ Ext.get('center-iframe').dom.src=’content.html’ } } |
8.
一个NestedLayoutPanel和GridPanel的例子
我们已经可以用BorderLayout和ContentPanel建立简单的布局了,这节我们将用NestedLayPanel和GridPanel创建复杂一点的布局。
布局整体情况如图3。
图3 |
<divid="north-div"></div> <divid="west-div"><divid='treelist'></div></div> <divid="center-div"> <divid='center-center'></div> <divid='center-south'></div> </div> <divid="south-div">状态栏</div> |
varlayout=newExt.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(); varinnerLayout=newExt.BorderLayout('center-div',{ center:{ titlebar:true, title:'条目列表', }, south:{ split:true, collapsible:true, titlebar:true, initialSize:200, minSize:100, maxSize:400, title:'内容', collapsedTitle:'内容' } }); |
为了在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; } |
layout.getRegion('west').on('collapsed',function(region){ region.collapsedEl.dom.style.background="url(../images/treelist.gif)centerno-repeat"; },this); |
在center区域的子区域center中,我们需要使用GridPanel面板在上面绑定一个表格,所以我们要首先定义一个表格,表格定义的具体代码可参考Grid的说明文章,我这里就不具体说了:
vargrid=newExt.grid.Grid('center-center',{ ds:ds, cm:colModel, autoExpandColumn:'title' }); grid.render(); grid.getSelectionModel().selectFirstRow(); innerLayout.add('center',newExt.GridPanel(grid)); innerLayout.add('south',newExt.ContentPanel('center-south')); layout.add('north',newExt.ContentPanel('north-div')); layout.add('west',newExt.ContentPanel('west-div',{fitToFrame:true,resizeEl:'treelist'})); layout.add('center',newExt.NestedLayoutPanel(innerLayout)); layout.add('south',newExt.ContentPanel('south-div')); |
我们再为例子加上一个树列表就完成了这个例子了。树列表的定义与创建也会有专门的文章说明,所以我也不在这里具体说了。
一个完整的NestedLayoutPanel和GridPanel例子代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>NestedLayoutPanel的布局例子</title> <metahttp-equiv="content-type"content="text/html;charset=utf-8"> <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"> </head> <bodyscroll="no"> <scripttype="text/javascript"src="../../adapter/ext/ext-base.js"></script> <scripttype="text/javascript"src="../../ext-all.js"></script> <scripttype="text/javascript"src="../../ext-lang-zh_CN.js"></script> <divid="north-div"></div> <divid="west-div"><divid='treelist'></div></div> <divid="center-div"> <divid='center-center'></div> <divid='center-south'></div> </div> <divid="south-div">状态栏</div> <script> Ext.onReady(function(){ vartb=newExt.Toolbar('north-div');//创建一个工具条 tb.add(newExt.Toolbar.SplitButton({ text:'文件', cls:'x-btn-text-iconblist', menu:{items:[ {text:'新建',handler:onItemClick}, {text:'保存',handler:onItemClick}, {text:'加载',handler:onItemClick} ]}}), newExt.Toolbar.MenuButton({ text:'编辑', cls:'x-btn-text-iconblist', menu:{items:[ {text:'复制',handler:onItemClick}, {text:'粘贴',handler:onItemClick} ]}}) ); varlayout=newExt.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(); varinnerLayout=newExt.BorderLayout('center-div',{ center:{ titlebar:true, title:'条目列表', }, south:{ split:true, collapsible:true, titlebar:true, initialSize:200, minSize:100, maxSize:400, title:'内容', collapsedTitle:'内容' } }); varmyData=[ ['张三','测试','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'] ]; vards=newExt.data.Store({ proxy:newExt.data.MemoryProxy(myData), reader:newExt.data.ArrayReader({},[ {name:'sender'}, {name:'title'}, {name:'sendtime'} ]) }); ds.load(); varcolModel=newExt.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'} ]); vargrid=newExt.grid.Grid('center-center',{ ds:ds, cm:colModel, autoExpandColumn:'title' }); grid.render(); grid.getSelectionModel().selectFirstRow(); innerLayout.add('center',newExt.GridPanel(grid)); innerLayout.add('south',newExt.ContentPanel('center-south')); layout.add('north',newExt.ContentPanel('north-div')); layout.add('west',newExt.ContentPanel('west-div',{fitToFrame:true,resizeEl:'treelist'})); layout.add('center',newExt.NestedLayoutPanel(innerLayout)); layout.add('south',newExt.ContentPanel('south-div')); layout.restoreState(); layout.endUpdate(); layout.getRegion('west').on('collapsed',function(region){ region.collapsedEl.dom.style.background="url(../images/treelist.gif)centerno-repeat"; },this); vartree=newExt.tree.TreePanel('treelist',{ animate:true }); varroot=newExt.tree.TreeNode({ text:'文件夹', allowDrag:false, allowDrop:false }); tree.setRootNode(root); root.appendChild( newExt.tree.TreeNode({text:'收件箱',allowDrag:false}), newExt.tree.TreeNode({text:'发件箱',allowDrag:false}), newExt.tree.TreeNode({text:'联系人',allowDrag:false}), newExt.tree.TreeNode({text:'已删除的邮件',allowDrag:false}) ); tree.render(); root.expand(); functiononItemClick(item){ alert(item.text); } }) </script> </body> </html> |
图4 |
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
相关文章推荐
- Ext布局类的介绍与使用
- Ext布局类的介绍与使用
- EXT布局类的介绍与使用
- Ext2.0框架的Grid使用介绍
- Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
- Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
- Ext框架的Grid使用介绍
- [Ext]2.0探索(七)Grid使用介绍
- Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
- 布局类的介绍与使用
- Ext.form.ComboBox使用方法介绍和级联使用
- Ext框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext框架的Grid使用介绍
- 使用REG注册表文件添加、修改或删除注册表键值和子项介绍
- 介绍如何使用Connection对象连接数据库
- Linggle 搜索引擎 使用方法介绍
- Java 集合系列07之 Stack详细介绍(源码解析)和使用示例
- Android Resource介绍和使用