《extjs最经典的学习教程》由会员分享，可在线阅读，更多相关《extjs最经典的学习教程（32页珍藏版）》请在金锄头文库上搜索。
1、 99 第第 5 章章 面板及布局类面板及布局类 ExtJS 不但在 Web 开发中成功引入了丰富的组件， 也引入了桌面程序中经常用到的面板 及布局概念。这些概念的引入在很大程度上改变了传统的 Web 开发方式，在第 3 章和第 4 章中主要学习了 ExtJS 支持的各种组件， 本章将进一步学习 ExtJS 的面板 （panel） 及布局类。 面板（panel）是 ExtJS 中一个很重要的概念，它相当于一幅画板，我们可以在它上面放 置需要的各种组件， 并使用不同的布局类对组件的摆放位置进行格式化， 掌握这些布局类的 特点及使用方式是突破 ExtJS 页面设计的关键，下面先来进行面板部分的学习
2、。 本章内容提示： 面板 panel 标准布局类 使用 ViewPort TabPanel 页签 通过布局嵌套实现表单元素横排 5.1 面板面板 panel 使用过 Delphi、Visual Basic 或 Java Swing 等开发语言的读者对面板（Panel）一定非常 熟悉，我们可以在面板随意地排版布局，它就像是一副骨架撑起了整个用户界面，在 ExtJS 中面板同样起着页面骨架的作用，所以学习面板是学习 ExtJS 页面布局的基础和起点。 ExtJS 面板从使用方式上来说更接近于 Java Swing 中的面板，通过为其指定不同的布局 方式或者进行面板嵌套达到复杂布局的目的，因此布局方
3、式是否丰富，能否进行嵌套，是衡 量 ExtJS 布局灵活性的重要指标。ExtJS 面板共支持 10 种不同风格的布局样式，并且允许无 限制的进行嵌套，这就给我们创造了一个尽情发挥的强大舞台。 5.1.1 认识认识 Ext.Panel Ext.Panel 扩展自 Ext.Container，是各种组件的容器也是基础类，可以扩展出功能更加强 大的面板。作为标准的面板组件主要包括如下 5 部分：底部工具栏（bottom toolbars） 、顶部 工具栏（top toolbars） 、面板头部（header） 、面板底部（footer）和面板体（body） ，下面是 一个标准面板的示例，可以帮助读者
4、更清晰的认识面板组件。 代码代码 5-1：Ext.Panel 示例示例 Ext.onReady(function() 100 ExtJS 应用开发指南应用开发指南 Ext.BLANK_IMAGE_URL = ././extjs2.0/resources/images/default/s.gif; new Ext.Panel( title:面板头部（header）, tbar : 顶端工具栏(top toolbars), bbar : 底端工具栏(bottom toolbars), height:200, width:300, frame:true, applyTo :panel, bodySt
5、yle:background-color:#FFFFFF, html:面板体（body）, tools : /设置面板头部功能区详细请参考 http:/ id:toggle, id:close, id:maximize , buttons: new Ext.Button( text:面板底部（footer） ) ) ); 代码 5-1 演示了标准面板的创建方式，从图 5-1 中可以看到一个标准面板所具有的全部 组成部分，这 5 部分不但位置不同功能也不尽相同，它们分别有自己存在的价值，读者可以 根据业务需要选择使用其中合适的部分构成自己需要的页面。效果如图 5-1 所示。 图 5-1 标准面板
6、 5.1.2 Ext.Panel 的主要功能的主要功能 上节介绍了 ExtJS 面板的主要表现形式， 接下来将介绍面板组件的主要配置项及常用方 法，这些配置项及方法将在后面的示例中用到，可以把这部分内容作为后续章节的铺垫，进 行快速的浏览，Ext.Panel 主要配置项目如表 5-1 所示。 表表 5-1 Ext.Panel 主要配置项目表主要配置项目表 配置项配置项 参数类型参数类型 说明说明 animCollapse Boolean 设置面板折叠或展开时是否显示动画效果，如果 Ext.Fx 类可用则默认为 true，否则为 fasle。 面板头部功能区 101 第 5 章 面板及布局类 a
7、pplyTo Mixed 一个页面上已经存在的元素或元素 id，组件将会追加到该元素的后面，而不是将其作为新组件的容器。 autoDestroy Boolean 设置是否自动销毁从容器中移除的组件， 默认为 true， 否则要手工销毁 autoHeight Boolean 是否使用自动高度，true 则使用自动高度，false 则使用固定高度，默认为 false autoLoad Object/String/ Function 设置面板自动加载的 url 地址。如果不为 null 则面板会尝试加载该 url并立刻在面板中进行渲染。这个连接将变成面板的 body 元素，所以可以根据需要在任何时候
8、刷新面板内容 autoScroll Boolean 设置是否自动显示滚动条，true 则设置面板的 body 元素样式为overflow:auto，内容溢出时会自动显示滚动条，false 则不显示滚动条对溢出的内容进行截断。默认为 false autoShow Boolean 设置是否移除组件的隐藏样式（例如x-hidden or x-hide-display） ，如果为 true 则在渲染时移除它们，默认为 false autoWidth Boolean 是否使用自动宽度，true 为自动宽度，false 为固定宽度，默认为 false baseCls String 应用于面板元素的基本样式
9、类，默认为x-panel bbar Object/Array 设置面板的底端工具栏，可以是 Ext.Toolbar 对象、工具栏配置对象或button 配置对象的数组。 bodyBorder Boolean 设置是否显示面板体（body）的内部边框，true 则显示，false 则隐藏，默认为 true。并且该项只在 border = true 时生效 bodyStyle String/Object/ Function 应用于面板体（body）的自定义样式。默认为 null border Boolean 这是是否显示面板体（body）的边框，true 则显示，false 则隐藏，默认为 tru
10、e。默认边框宽度为 2px buttonAlign String 设置面板底部 （footer） 中按钮的对齐方式， 有效值包括： right, left 和 center，默认为right buttons Array 加入到面板底部（footer）中按钮配置对象的数组 collapseFirst Boolean 设置渲染展开或收缩按钮的顺序。 true 则在其它按钮渲染前先渲染展开或收缩按钮，false 则最后渲染，默认为 true。该配置项决定了展开或收缩按钮的位置。 collapsed Boolean 设置面板在第一次渲染时是否处于收缩状态，true 则收缩，false 则展开，默认为
11、false collapsible Boolean 设置是否允许面板进行展开和收缩， true 则允许进行展开和收缩， 并在面板头部显示伸缩按钮。默认为 false contentEl String 设置面板的内容元素，可以是页面元素的 id 或已存在的 HTML 节点 defaultType String 面板中元素的默认类型，默认为panel defaults Object 应 用 到 面 板 容 器 中 所 有 元 素 的 配 置 对 象 ， 例 如 ： defaults: bodyStyle:padding:15px floating Boolean 设置面板是否可以浮动， true
12、则允许， 默认为 false。 注意， 设置 floating为 true 会导致面板显示在负偏移的位置，从而面板不可见，因为浮动状态下面板是采用绝对定位的，位置必须在渲染之后进行明确的设置（例如 myPanel.setPosition(100,100);） .， 浮动面板也需要有固定的宽度 footer Boolean 设置是否创建面板底部（footer）元素，true 则创建，false 则跳过 footer元素的创建，如果一个或多个按钮被加入到 footer 中，则 footer 的设置会被忽略，而直接创建 footer 元素 102 ExtJS 应用开发指南应用开发指南 frame B
13、oolean 设置是否渲染面板，true 则渲染面板为自定义的圆角边框，false 则渲染为 1px 的直角边框 header Boolean 设置是否创建面板头部 （header） 元素， true 则创建， false 则跳过 header元素的创建，如果提供了 title 但没有设置 header 则 header 会被自动创建。如果提供了 title 但明确设置 header 为 false 则 header 不会被创建 headerAsText Boolean 设置是否在面板的 header 中显示 title，true 则显示，默认为 true height Number 面板高度
14、，默认为 auto hideBorders Boolean true 则隐藏面板容器中所有组件的边框，false 则根据组件的具体配置进行显示 hideCollapseTool Boolean 设置当 collapsible 为 true 时，是否显示展开或收缩按钮 html String/Object 设置面板 （body） 元素的内容为 HTML 片段或 DomHelper 生成的内容。 items Mixed 单独一个子组件或子组件的数组 layout String 面板的布局类型，默认 Ext.layout.ContainerLayout 布局，被选布局的配置项通过 layoutCon
15、fig 进行设置 layoutConfig Object 这个配置对象包含被选布局的配置项，针对每种布局的配置项需要查看相应的布局类说明 maskDisabled Boolean 设置当面板不能使用时是否遮罩面板，true 则遮罩，默认为 true shadow Boolean/String 设置是否在面板后面显示阴影， true 则显示， 或通过字符串指定阴影的显示模式，有效值包括：sides、frame、drop，默认为sides。该项只在floating 为 true 时生效 shadowOffset Number 设置面板阴影的偏移量， 以像素为单位， 默认为 4。 该项只在 floa
16、ting 为 true 时生效 tbar Object/Array 设置面板的顶端工具栏，可以是 Ext.Toolbar 对象、工具栏配置对象或button 配置对象的数组。注意，面板渲染后只能通过 getTopToolbar 方法访问该工具栏 title String 显示在面板头部的标题信息 titleCollapse Boolean 设置是否允许通过点击面板头部进行展开和收缩操作， true 则允许， 默认为 false tools Array 工具按钮配置对象的数组，这些按钮会被添加到面板头部功能区，在表 5-2 中会有详细的说明 width Number 面板宽度，默认为 auto Tools 配置项主要用来设置面板头部功能区所要显示的各类按钮，每个按钮的配置对象 可能包含的配置项在表 5-2 中说明，tools 配置项 id 与按钮图标对应关系如表 5-
