Ext布局类的介绍与使用

在WEB应用的开发中，应用界面的布局设计是一项很重要的内容。在EXT中，可以通过BorderLayout与NestedLayoutPanel很方便的设计出各种的布局。本文章的主要内容主要是介绍如何通过BorderLayout、NestedLayoutPanel以及各种面板设计页面布局。

<!--[if !supportLists]-->1. <!--[endif]-->BorderLayout类

BorderLayout类是布局中的最基本的单元，它已预设了south、 east、 west、 north和center等5个区域。你可以根据你的需要任意组合这些区域，但是要注意的一点就是，center区域是必须使用的，而且center区域不允许隐藏和折叠。

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

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

其参数分别是：

container：	绑定布局的容器。绑定布局的容易可以是docume.body，也可以是其它HTMLElement。不过如果是其它HTMLElement，该HTMLElement不能是绝对定位的，或者要在该HTMLElement中加入css定义“position:relative”，还需要为该HTMLElement设置大小。
config：	布局区域的划分与定义。主要是对north、south、center、east和west五个区域就行定义。区域的定义请参考LayoutRegion类的定义参数。

BorderLayout类常用的属性、方法与事件如表1。

属性
monitorWindowResize	如果设置为发绿色，则不检测窗口大小的改变。默认值为true。
方法
add	增加一个内容面板（或子类）到某个区域。 定义：public function add(String target, Ext.ContentPanel panel) 参数： target：目标区域的关键字（north、south、 east、 west 或center） panel：要增加的面板类 返回：Ext.ContentPanel
addRegion	增加一个不存在的区域。 定义：public function addRegion(String target, Object config) 参数： target：目标区域的关键字（north、south、 east、 west 或center） config：区域定义对象。 返回：BorderLayoutRegion
beginUpdate	暂时停止LayoutManager的自动布局管理。 定义：public function beginUpdate() 参数：无 返回：void
endUpdate	恢复LayoutManager的自动管理同时结束更新。 定义：public function endUpdate(Boolean noLayout) 参数： noLayout：如果为true则不进行布局更新。默认值为false。 返回：void
findPanel	通过id查找区域内的面板。 定义：public function findPanel(String panelId) 参数： panelId：面板id。 返回：Ext.ContentPanel或者null（没有找到）。
getEl	返回绑定布局的元件。 定义：public function getEl() 参数：无 返回：Ext.Element
getRegion	根据关键字返回指定的区域。 定义：public function getRegion(String target) 参数： target：目标区域的关键字（north、south、 east、 west 或center） 返回：Ext.LayoutRegion
remove	从某个区域中移除一个内容面板（或子类）。 定义：public function remove(String target, Number/String/Ext.ContentPanel panel) 参数： target：目标区域的关键字（north、south、 east、 west 或center） panel：要移除面板的索引值、id或者对象本身。 返回：Ext.ContentPanel
restoreState	使用Ext.state.Manager或者状态提供者重建布局。 定义：public function restoreState([Ext.state.Provider provider]) 参数： provider : Ext.state.Provider（可选） 返回：void
showPanel	设置某个面板为当前活动面板。 定义：public function showPanel(String/ContentPanel panelId) 参数： panelId：要设置的面板id或对象本身。 返回：Ext.ContentPanel或者null（面板不存在）
事件
regioncollapsed	当一个区域折叠的时候触发本事件。 传递参数： region : Ext.LayoutRegion（折叠的区域对象）
regionexpanded	当一个区域展开的时候触发本事件。 传递参数： region : Ext.LayoutRegion（展开的区域对象）
regionresized	当用户改变区域大小的时候触发本事件。 传递参数： region : Ext.LayoutRegion（改变大小的区域对象） newSize: 新的区域大小（east/west为宽度,north/south为高度）。
表1

<!--[if !supportLists]-->2. <!--[endif]-->LayoutRegion类

因为布局是预定好了五个区域的，所以LayoutRegion类不可以创建， 只可以对预定区域进行设置、操作和附加事件。

LayoutRegion的常用的属性、方法、事件和定义参数如表2。

属性
bodyEl	返回该区域的主元件对象，类型为Ext.Element。
collapsedEl	返回该区域折叠后的主html元件对象，类型为Ext.Element。
el	返回该区域的容器元件对象，类型为Ext.Element。
panels	返回该区域中的面板集合。类型为Ext.util.MixedCollection
titleEl	返回该区域的标题栏元件对象，类型为Ext.Element。
titleTextEl	返回该区域的标题显示元件，类型为HTMLElement。
方法
add	增加一个内容面板（或子类）到该区域。 定义：public function add(ContentPanel... panel) 参数： panel：要增加的面板，可以是多个。 返回：Ext.ContentPanel，如果只增加一个，则返回增加的面板对象，否则返回null。
collapses	折叠该区域。 定义：public function collapse([Boolean skipAnim]) 参数： skipAnim：如果为true则在折叠区域时不显示动态效果（如果animate设置为true），可选参数。 返回：void
expand	展开该区域、 定义：public function expand(Ext.EventObject e, [Boolean skipAnim]) 参数： e： 触发展开区域的事件，如果手动调用则设置null。 skipAnim：如果为true则在展开区域时不显示动态效果（如果animate设置为true），可选参数。 返回：void
getActivePanel	获取当前为活动状态的面板。 定义public function getActivePanel() 参数：无 返回：Ext.ContentPanel或null
getEl	返回该区域的容器元件。 定义：public function findPanel(String panelId) 参数：无 返回：Ext. Element
getPanel	根据面板的索引、id或对象本身返回面板。 定义：public function getPanel(Number/String/ContentPanel panel) 参数： Panel：面板的索引、id或对象本身 返回：Ext.ContentPanel
getPosition	返回该区域的位置(north/south/east/west/center)。 定义：public function getPosition() 参数：无 返回：String
getTabs	返回该区域中的tab面板。 定义：public function getTabs() 参数：无 返回：Ext.TabPanel
hasPanel	检查某个面板是否在该区域。 定义：public function hasPanel(Number/String/ContentPanel panel) 参数： panel: 面板的索引、id或对象本身 返回：Boolean
hide	隐藏该面板。 定义：public function hide() 参数：无 返回：void
hidePanel	根据面板的索引、id或对象本身隐藏面板。 定义：public function getPanel(Number/String/ContentPanel panel) 参数： Panel：面板的索引、id或对象本身 返回：void
isVisible	检查该区域是否可见的。 定义：public function isVisible() 参数：无 返回：Boolean，如果该区域可见返回true
remove	从该区域中移除一个面板。 定义：public function remove(Number/String/Ext.ContentPanel panel) 参数： panel：要移除面板的索引值、id或者对象本身。 返回：Ext.ContentPanel
resizeTo	调整区域大小。如果是垂直区域(west, east)则调整宽度，如果是水平区域(north, south)则调整高度。 定义：public function resizeTo(Number newSize) 参数： newSize：新的宽度或高度 返回：void
setCollapsedTitle	设置north/south区域折叠时的标题（可通过定义collapsedTitle参数设置）。 定义：public function setCollapsedTitle([String title]) 参数： title：可选参数，标题文本可以是HTML标记 返回：void
show	显示该区域。 定义：public function show() 参数：无 返回：void
showPanel	显示该区域中某个面板。 定义：public function showPanel(Number/String/ContentPanel panelId) 参数： panelId：要显示面板的索引值、id或者对象本身。 返回：Ext.ContentPanel
unhidePanel	显示被隐藏了的面板的标签。 定义：public function unhidePanel(Number/String/ContentPanel panel) 参数： panelId：要显示面板的索引值、id或者对象本身。 返回：void
事件
beforeremove	当一个面板被移动或关闭时出发本事件。如果要取消该操作，请在事件中设置：e.cancel = true 传递参数： this：Ext.LayoutRegion panel：Ext.ContentPanel e：取消事件对象
collapsed	当该区域被折叠是触发本事件。 传递参数： this : Ext.LayoutRegion
expanded	当该区域被展开是触发本事件。 传递参数： this : Ext.LayoutRegion
invalidated	当该区域在布局中改变时触发本时间。 传递参数： this : Ext.LayoutRegion
panelactivated	当该区域中某个面板成为活动面板时触发本事件。 传递参数： this：Ext.LayoutRegion panel：Ext.ContentPanel
paneladded	当该区域中增加面板时触发本事件。 传递参数： this：Ext.LayoutRegion panel：Ext.ContentPanel
panelremoved	当该区域中删除面板时触发本事件。 传递参数： this：Ext.LayoutRegion panel：Ext.ContentPanel
resized	当用户改变区域大小时触发本事件。 传递参数： this：Ext.LayoutRegion newSize：新的宽度（east/west）或高度（north/south）
visibilitychange	当该区域显示状态改变时触发本事件。 传递参数： this：Ext.LayoutRegion visibility：显示（ture）或隐藏（false）
区域定义参数
alwaysShowTabs	如果设置为true，则总是显示标签栏。默认值未false。
animate	如果设置为true，则在展开和折叠时有动画效果。缺省值为false。
autoHide	如果设置为false，则当鼠标离开“浮动”区域的时候不自动隐藏。默认值是true。
autoScroll	如果设置为true，则当显示内容超出区域时显示滚动条，默认值为false。
closeOnTab	如果设置为true，则在标签标题显示关闭图标。默认值未false。
cmargins	设置区域折叠时四边的外延边距。默认值是：north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0}。
collapsed	如果设置为true，则显示初始化为折叠状态。默认值为false。
collapsedTitle	在north或south区域折叠时显示的信息。
collapsible	如果设置为false，则不允许折叠。缺省值为true。
disableTabTips	如果设置为true，则屏蔽标签提示信息。默认值为false。
duration	设置展开和折叠区域时的动画效果时间长度。默认值是0.3
floatable	如果设置为false，则不允许浮动。默认值为true。
hidden	如果设置为true，则区域初始化为隐藏状态。默认值为false。
hideTabs	如果设置为true，则不显示标签。默认值为false。
hideWhenEmpty	如果设置为true，则当该区域没有面板的时候隐藏区域。
initialSize	设置该区域的初始大小。north、south是高度，east、west为宽度，center如果是上下分区则设置高度，如果是左右分区则是宽度。
margins	设置对象四边的外延边距。默认值是{top: 0, left: 0, right:0, bottom: 0}。
maxSize	设置该区域的最大尺寸。north、south是高度，east、west为宽度，center如果是上下分区则设置高度，如果是左右分区则是宽度。
minSize	设置该区域的最小尺寸。north、south是高度，east、west为宽度，center如果是上下分区则设置高度，如果是左右分区则是宽度。
minTabWidth	设置标签的最小宽度。默认值是40。
preferredTabWidth	设置首先的标签宽度。默认值是150。
preservePanels	如果设置为true，则保留被移除的面板以便重新打开。默认值为false。
resizeTabs	如果设置为true，则会自动设置标签的大小，这将会根据标签栏的空间自动调整所有标签到相同的大小，类似于FireFox 1.5的标签栏。默认值是false。
showPin	如果设置为true，则显示大头针按钮。默认值为false。
slideDuration	设置区域浮动或隐藏时的动画效果时间。默认值是0.45
split	如果设置为true，则显示分割控制条，允许改变区域的大小。默认值为false。
tabPosition	设置标签的显示位置是在顶部还是底部，默认值为“bottom”，标签显示在底部。如果要标签显示在顶部，设置值为“top”。
title	设置区域的标题（显示在面板的顶部）。如果设置titlebar的值为false，则该设置的值不会被显示。
titlebar	如果设置为true，则显示标题栏，否则不显示标题栏。默认值是true。
toolbar	设置由Ext.Toolbar创建的工具条。
useShim	设置分割控制条是否通过div层在iframes上进行拖动。默认值为false。
表2

<!--[if !supportLists]-->3. <!--[endif]-->ContentPanel类

ContentPanel是一个基本的面板类。面板的作用就是提供一个容器，大家可以在这个容器里加入自己要输出的内容，例如表格、树列表、Iframe等等。从contentPanel派生出GridPanel类和NestedLayoutPanel类。

创建一个新面板的语句如下：

new ContentPanel (String/HTMLElement/Ext.Element el, String/Object config, [String content])

其参数分别是：

<t

相关推荐

Ext布局类的介绍与使用的例程

Ext布局类是Ext JS库中的核心组件之一，用于在页面上组织和管理控件的布局。这个强大的功能允许开发者创建复杂、响应式的用户界面。在本文中，我们将深入探讨`borderlayout`，这是一种常见的布局模式，它将容器分为...

ext布局和菜单设计整理

ext布局和菜单设计整理

EXT 布局 Layout 资料

如果未明确指定 `layout`，默认将使用 `ContainerLayout` 帺类作为布局，这种布局仅简单地将子元素放置到容器中。 #### 6.2 Border 布局 **Border** 布局由类 `Ext.layout.BorderLayout` 定义，其布局名称为 `...

ext简单布局，直接修改即可使用

ext做简单布局，ext简单布局，直接修改即可使用ext简单布局，直接修改即可使用ext简单布局，直接修改即可使用

Ext介绍以及_ext页面布局

接着，`ext22/adapter/ext/ext-base.js`是基础脚本，定义了ExtJS的核心功能和基础类，而`ext22/ext-all.js`包含了完整的ExtJS库，依赖于`ext-base.js`，因此必须先导入。 在创建ExtJS应用时，一个常见的入门示例是...

ext表格布局小例子

本文档旨在解析一个具体的 ExtJS 表格布局小例子，重点介绍其中涉及的数据存储、数据删除与添加的方法。ExtJS 是一款强大的 JavaScript 框架，用于构建交互式的前端应用。其表格组件（`Ext.grid.GridPanel`）是其最...

ext2.0 layout布局(使用viewport)

ext2.0 layout布局(使用viewport),将其部署到php服务器上，可以查看效果：适合一般的应该工作界面，有滑动菜单和树形菜单等，初步实现了一个不错的应用视图框架

使用EXT进行网站布局的一个例子

使用EXT进行网站布局的一个例子，供大家参考。

经典EXT后台简单布局

EXT后台简单布局，很好的，好用！！！！

Ext 深入剖析,使用UML对Ext类关系解读

花费半年心血研究解读总结。包含了Ext的核心类解析，Ext对象原理，Ext事件模型，Ext布局模型,AJAX原理，Ext数据模型的本质原理；UML图例详解。

GWT-ext 布局示例

2. **垂直布局** (VerticalLayout)：与水平布局相反，垂直布局使子组件沿垂直方向排列。通过使用 `com.gwtext.client.widgets.layout.VerticalLayout` 类，子组件将按照添加顺序从上到下排列，如代码清单2所示。这将...

Ext常用布局

Fit布局的类为`Ext.layout.FitLayout`，它有两个子类：`AccordionLayout`和`CardLayout`。`AccordionLayout`用于折叠面板布局，而`CardLayout`则用于在一个区域内展示一组卡片，每次只显示一张。设置Fit布局非常简单...

EXT布局，EXT相关知识

主要讲的是EXT布局，使用这个布局，能让你学习更好的知识，我也在学习，咱们一起学习吧~~

ext3.jar ext使用非常多

EXT3.jar的使用，意味着开发者可以在Java环境中直接调用EXT的相关类和方法，实现客户端的动态渲染。这种服务器端集成的方式，减少了前端与后端的通信负担，提高了应用的整体性能。在实际项目中，开发者可以通过Maven...

Ext10种布局

- **定义**：`Ext.layout.ContainerLayout` 是 ExtJS 的基础布局类，其他所有布局都基于此基类进行扩展。 - **作用**：当没有为容器指定任何布局时，默认采用 `ContainerLayout`。该布局简单地将所有子元素按顺序...

ext布局使用，菜单内容

主要编写EXT的布局，rar文件，里面包含了EXT2.1的资源文件，

Ext table布局实例 formpanel的table布局

通过以上介绍，你应该对Ext table布局和formpanel的table布局有了基本的理解。在实际开发中，结合这些知识点，可以创建出高效、美观且功能丰富的用户界面。记住，实践是检验真理的唯一标准，动手尝试才是掌握技术的...

Ext 简单布局 菜单树 实例

用Ext的Panel实现了简单布局，并在左侧显示树形菜单

本科毕业论文（EXT2文件系统的磁盘布局）

EXT2 文件系统是GNU/Linux操作系统中的标准文件系统，其磁盘布局是理解EXT2运作机制的关键。EXT2在Linux中扮演着重要角色，它负责管理和存储数据，为用户提供统一的文件操作接口。Linux支持多种文件系统，如EXT、EXT...

Global site tag (gtag.js) - Google Analytics

el：	绑定面板的容器。可以是HTMLElement的id，HTMLElement本身或者Ext.Element。
config：	面板的定义。可以是字符类型（只设置面板标题），也可以是一个定义参数对象，定义参数请参阅表3的定义参数。