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的自动布局管理。定义：p`ublic 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作为布局每个区域的容器：

从代码我们可以看到，每个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，定义了noth、center和south三个区域。north区域包含一个工具条，高度是28。center区域设置了总是显示标签栏，标签位置在顶部。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>

</head>

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中加入了“状态栏”：

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

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

function onItemClick(item){

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

}

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

我们已经可以用BorderLayout和ContentPanel建立简单的布局了，这节我们将用NestedLayPanel和GridPanel创建复杂一点的布局。

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

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

});

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

为了在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;

}

要通过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))）。south、west和north区域的添加代码和简单的例子没什么不同，而不同的地方就是center主区域代码的添加，不再是contentPanel，而是NestedLayoutPanel了，而其参数是一个BorderLayout类innerLayout。

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

一个完整的NestedLayoutPanel和GridPanel例子代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>NestedLayoutPanel的布局例子</title>

</head>

</div>

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

本文章主要介绍了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

posted on 2007-09-03 14:58 木鱼哥阅读(166) 评论(0) 编辑收藏举报

刷新页面返回顶部

木鱼哥

Ext布局类的介绍与使用

Ext布局类的介绍与使用

导航

公告