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作为布局每个区域的容器：

1. <div id="north-div">div>
2. <div id="center-div">内容div>
3. <div id="south-div">状态栏div>

从代码我们可以看到，每个div都定义了一个id，其作用就是创建区域面板时的参数el的值。
下面开始撰写创建布局的javascript代码。首先是创建一个布局，并定义各区域的参数：

1. var tb=new Ext.Toolbar('north'); //创建一个工具条
2. tb.add(new Ext.Toolbar.SplitButton({
3. text: '文件',
4. cls: 'x-btn-text-icon blist',
5. menu : {items: [
6. {text: '新建', handler: onItemClick},
7. {text: '保存', handler: onItemClick}
8. ]}}),
9. new Ext.Toolbar.MenuButton({
10. text: '编辑',
11. cls: 'x-btn-text-icon blist',
12. menu : {items: [
13. {text: '复制', handler: onItemClick},
14. {text: '粘贴', handler: onItemClick}
15. ]}})
16. );
17. var layout = new Ext.BorderLayout(document.body,{
18. north:{toolbar:tb,initialSize:28},
19. center: {alwaysShowTabs:true,tabPosition:'top'},
20. south: {initialSize:28}
21. });

我们先别看工具条的创建代码，这个将会在另一篇文章中介绍。从黑体字部分的代码我们可以看到，我们定义了一个变量layout来保存布局对象，布局的容器是document.body，定义了noth、center和south三个区域。north区域包含一个工具条，高度是28。center区域设置了总是显示标签栏，标签位置在顶部。south区域只设置了高度为28。
虽然我们 定义和创建了布局，但是目前在页面我们是看不到任何效果的，我们还需要为布局的每个区域加入面板并执行刷新：

1. layout.beginUpdate();
2. layout.add('north', new Ext.ContentPanel('north-div'));
3. layout.add('center', new Ext.ContentPanel('center-div','简单的布局例子'));
4. layout.add('south', new Ext.ContentPanel('south-div'));
5. layout.restoreState();
6. layout.endUpdate();

首先是通过beginUpdate方法中止LayoutManager的自动布局管理，然后给各区域加入一个面板。在增加center面板时，还增加了一个标题，该标题会作为标签的文本显示。然后通过restoreState方法重建布局。最后是通过endUpdate方法在恢复LayoutManager自动管理同时结束更新。这样，一个简单的布局就出来。全部代码如下：

1. >
2. <html>
3. <head>
4. <title>简单的布局例子title>
5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
6. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
7. head>
8. <body scroll="no">
9. <script type="text/javascript" src="../../adapter/ext/ext-base.js">script>
10. <script type="text/javascript" src="../../ext-all.js">script>
11. <script type="text/javascript" src="../../ext-lang-zh_CN.js">script>
12. <div id="north-div">div>
13. <div id="center-div">内容div>
14. <div id="south-div">状态栏div>
15. <script>
16. Ext.onReady(function(){
17. var tb=new Ext.Toolbar('north-div');//创建一个工具条
18. tb.add(new Ext.Toolbar.SplitButton({
19. text: '文件',
20. cls: 'x-btn-text-icon blist',
21. menu : {items: [
22. {text: '新建', handler: onItemClick},
23. {text: '保存', handler: onItemClick},
24. {text: '加载', handler: onItemClick}
25. ]}}),
26. new Ext.Toolbar.MenuButton({
27. text: '编辑',
28. cls: 'x-btn-text-icon blist',
29. menu : {items: [
30. {text: '复制', handler: onItemClick},
31. {text: '粘贴', handler: onItemClick}
32. ]}})
33. );
34. var layout = new Ext.BorderLayout(document.body,{
35. north:{toolbar:tb,initialSize:28},
36. center: {alwaysShowTabs:true,tabPosition:'top'},
37. south: {initialSize:28}
38. });
39. layout.beginUpdate();
40. layout.add('north', new Ext.ContentPanel('north-div'));
41. layout.add('center', new Ext.ContentPanel('center-div','简单的布局例子'));
42. layout.add('south', new Ext.ContentPanel('south-div'));
43. layout.restoreState();
44. layout.endUpdate();
45. function onItemClick(item){
46. alert(item.text);
47. }
48. })
49. script>
50. body>
51. html>

最终效果如图2。本例文件是附件中的examples/layout/simple.html。

图2

7. 为简单的例子增加内容
上面一节我们制作了一个简单的例子，但是没有内容，那么如何加入内容呢？最简单的办法就是在面板绑定容器中直接加入内容。例如在center-div中我们加入了"内容"，在south-div中加入了"状态栏"：

1. "center-div">内容
2. "south-div">状态栏

但是我们的应用通常是动态加载数据的，那怎么办呢？其实很简单，就是利用ContentPanel的setContent方法和setUrl方法加载。setContent方法就是直接从JavaScipt程序中插入HTML。setUrl方法则允许您从服务端得到数据加入ContentPanel中。
下面我们先测试一下setContent方法。我们要做的就是当菜单选择了一个item的时候将选择的item的文本显示在状态栏里。我们将例子中菜单单击的事件修改如下：

1. function onItemClick(item){
2. layout.getRegion('south').getPanel('south-div').setContent(item.text);
3. }

为了调用setContent方法，我们首先要找到对应的面板，如何找到对应的面板呢？上面的代码就是通过"layout.getRegion('south')"先找到状态栏对应的区域south，然后通过面板的id（south-div）找到对应的面板，最后是设置其内容为选择菜单的文本。找到对应的面板还有一个方法，就是分配一个变量给ContentPanel然后便可直接引用。我们修改一下center区域的面板增加方法，将center区域的面板分配给变量centerContent，然后再增加：

1. var centerContent=new Ext.ContentPanel('center-div','简单的布局例子');
2. layout.add('center', centerContent);

下面我们测试一下setUrl方法，在center-div面板中加载内容。操作是单击文件菜单下的加载后载入内容。我们先修改菜单单击事件：

1. function onItemClick(item){
2. layout.getRegion('south').getPanel('south-div').setContent(item.text);
3. if(item.text=='加载'){
4. centerContent.setUrl('content.html','',true);
5. centerContent.refresh();
6. }
7. }

代码中直接通过变量centerContent引用面板，调用setUrl方法加载content.html文件，没有设置提交参数，而且设置了只加载一次，然后强制刷新面板。加载后我们会发现内容超出了面板范围，有些东西看不见了，怎么办？很简单，在创建面板时加入定义参数"fitToFrame"，设置其值为true，再加入"autoScroll"设置其值为true，就可以了：

1. var centerContent=new Ext.ContentPanel('center-div',{title:'简单的布局例子', fitToFrame :true,autoScroll:true});

在IE中存在一个问题，就是加载的内容的样式没有生效，原因是一些浏览器支持动态样式而一些不支持，要较好地解决上述问题，推荐使用Iframe。这个我们就不测试了，只提供代码给大家参考，大家可以自己测试一下：

1. //center-div修改如下：
2. "center-div">

代码修改如下：

1. var centerContent=new Ext.ContentPanel('center-div',{title:'简单的布局例子', fitToFrame :true,autoScroll:true, resizeEl:'center-iframe'});
2. function onItemClick(item){
3. layout.getRegion('south').getPanel('south-div').setContent(item.text);
4. if(item.text=='加载'){
5. Ext.get('center-iframe').dom.src='content.html'
6. }
7. }

本例文件是附件中的examples/layout/simple-content.html。

8. 一个NestedLayoutPanel和GridPanel的例子
我们已经可以用BorderLayout和ContentPanel建立简单的布局了，这节我们将用NestedLayPanel和GridPanel创建复杂一点的布局。
布局整体情况如图3。


图3

我们先来看看布局容易的定义：

1. "north-div">
2. "west-div">

   'treelist'>
3. "center-div">
4. 'center-center'>
5. 'center-south'>