ExtJS 最经典的学习教程


99 第 5 章 面板及布局类 ExtJS 不但在 Web 开发中成功引入了丰富的组件,也引入了桌面程序中经常用到的面板 及布局概念。这些概念的引入在很大程度上改变了传统的 Web 开发方式,在第 3 章和第 4 章中主要学习了 ExtJS 支持的各种组件,本章将进一步学习 ExtJS 的面板(panel)及布局类。 面板(panel)是 ExtJS 中一个很重要的概念,它相当于一幅画板,我们可以在它上面放 置需要的各种组件,并使用不同的布局类对组件的摆放位置进行格式化,掌握这些布局类的 特点及使用方式是突破 ExtJS 页面设计的关键,下面先来进行面板部分的学习。 本章内容提示:  面板 panel  标准布局类  使用 ViewPort  TabPanel 页签  通过布局嵌套实现表单元素横排 5.1 面板 panel 使用过 Delphi、Visual Basic 或 Java Swing 等开发语言的读者对面板(Panel)一定非常 熟悉,我们可以在面板随意地排版布局,它就像是一副骨架撑起了整个用户界面,在 ExtJS 中面板同样起着页面骨架的作用,所以学习面板是学习 ExtJS 页面布局的基础和起点。 ExtJS 面板从使用方式上来说更接近于 Java Swing 中的面板,通过为其指定不同的布局 方式或者进行面板嵌套达到复杂布局的目的,因此布局方式是否丰富,能否进行嵌套,是衡 量 ExtJS 布局灵活性的重要指标。ExtJS 面板共支持 10 种不同风格的布局样式,并且允许无 限制的进行嵌套,这就给我们创造了一个尽情发挥的强大舞台。 5.1.1 认识 Ext.Panel Ext.Panel 扩展自 Ext.Container,是各种组件的容器也是基础类,可以扩展出功能更加强 大的面板。作为标准的面板组件主要包括如下 5 部分:底部工具栏(bottom toolbars)、顶部 工具栏(top toolbars)、 面板头部(header)、面板底部(footer)和面板体(body),下面是 一个标准面板的示例,可以帮助读者更清晰的认识面板组件。 代码 5-1:Ext.Panel 示例 代码 5-1 演示了标准面板的创建方式,从图 5-1 中可以看到一个标准面板所具有的全部 组成部分,这 5 部分不但位置不同功能也不尽相同,它们分别有自己存在的价值,读者可以 根据业务需要选择使用其中合适的部分构成自己需要的页面。效果如图 5-1 所示。 图 5-1 标准面板 5.1.2 Ext.Panel 的主要功能 上节介绍了 ExtJS 面板的主要表现形式,接下来将介绍面板组件的主要配置项及常用方 法,这些配置项及方法将在后面的示例中用到,可以把这部分内容作为后续章节的铺垫,进 行快速的浏览,Ext.Panel 主要配置项目如表 5-1 所示。 表 5-1 Ext.Panel 主要配置项目表 配置项 参数类型 说明 animCollapse Boolean 设置面板折叠或展开时是否显示动画效果,如果 Ext.Fx 类可用则默认 为 true,否则为 fasle。 面板头部功能区 101 第 5 章 面板及布局类 applyTo Mixed 一个页面上已经存在的元素或元素 id,组件将会追加到该元素的后面, 而不是将其作为新组件的容器。 autoDestroy Boolean 设置是否自动销毁从容器中移除的组件,默认为 true,否则要手工销毁 autoHeight Boolean 是否使用自动高度,true 则使用自动高度,false 则使用固定高度,默 认为 false autoLoad Object/String/ Function 设置面板自动加载的 url 地址。如果不为 null 则面板会尝试加载该 url 并立刻在面板中进行渲染。这个连接将变成面板的 body 元素,所以可 以根据需要在任何时候刷新面板内容 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 应用于面板元素的基本样式类,默认为'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 则隐藏,默 认为 true。默认边框宽度为 2px buttonAlign String 设置面板底部(footer)中按钮的对齐方式,有效值包括:'right', 'left' 和 'center',默认为'right' buttons Array 加入到面板底部(footer)中按钮配置对象的数组 collapseFirst Boolean 设置渲染展开或收缩按钮的顺序。true 则在其它按钮渲染前先渲染展开 或收缩按钮,false 则最后渲染,默认为 true。该配置项决定了展开或 收缩按钮的位置。 collapsed Boolean 设置面板在第一次渲染时是否处于收缩状态,true 则收缩,false 则展 开,默认为 false collapsible Boolean 设置是否允许面板进行展开和收缩,true 则允许进行展开和收缩,并在 面板头部显示伸缩按钮。默认为 false contentEl String 设置面板的内容元素,可以是页面元素的 id 或已存在的 HTML 节点 defaultType String 面板中元素的默认类型,默认为'panel' defaults Object 应用到面板容器中所有元素的配置对象,例如: defaults: {bodyStyle:'padding:15px'} floating Boolean 设置面板是否可以浮动,true 则允许,默认为 false。注意,设置 floating 为 true 会导致面板显示在负偏移的位置,从而面板不可见,因为浮动 状态下面板是采用绝对定位的,位置必须在渲染之后进行明确的设置 (例如 myPanel.setPosition(100,100);).,浮动面板也需要有固定的宽度 footer Boolean 设置是否创建面板底部(footer)元素,true 则创建,false 则跳过 footer 元素的创建,如果一个或多个按钮被加入到 footer 中,则 footer 的设置 会被忽略,而直接创建 footer 元素 102 ExtJS 应用开发指南 frame Boolean 设置是否渲染面板,true 则渲染面板为自定义的圆角边框,false 则渲 染为 1px 的直角边框 header Boolean 设置是否创建面板头部(header)元素,true 则创建,false 则跳过 header 元素的创建,如果提供了 title 但没有设置 header 则 header 会被自动创 建。如果提供了 title 但明确设置 header 为 false 则 header 不会被创建 headerAsText Boolean 设置是否在面板的 header 中显示 title,true 则显示,默认为 true height Number 面板高度,默认为 auto hideBorders Boolean true 则隐藏面板容器中所有组件的边框,false 则根据组件的具体配置 进行显示 hideCollapseTool Boolean 设置当 collapsible 为 true 时,是否显示展开或收缩按钮 html String/Object 设置面板(body)元素的内容为 HTML 片段或 DomHelper 生成的内容。 items Mixed 单独一个子组件或子组件的数组 layout String 面板的布局类型,默认 Ext.layout.ContainerLayout 布局,被选布局的配 置项通过 layoutConfig 进行设置 layoutConfig Object 这个配置对象包含被选布局的配置项,针对每种布局的配置项需要查 看相应的布局类说明 maskDisabled Boolean 设置当面板不能使用时是否遮罩面板,true 则遮罩,默认为 true shadow Boolean/String 设置是否在面板后面显示阴影,true 则显示,或通过字符串指定阴影的 显示模式,有效值包括:sides、frame、drop,默认为'sides'。该项只在 floating 为 true 时生效 shadowOffset Number 设置面板阴影的偏移量,以像素为单位,默认为 4。该项只在 floating 为 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-3 所示。 表 5-2 tools 配置项明细表 配置项 参数类型 说明 id String 必选项,可能值及效果见表 5.3 handler Function 点击按钮后触发的处理函数,参数包括:event : Ext.EventObject、toolEl : Ext.Element、Panel : Ext.Panel scope Object 处理函数的执行范围 qtip String/Object 为按钮指定提示信息,可以是字符串或配置对象 hidden Boolean 设置初次渲染时,是否隐藏 on Object 为按钮配置事件监听器。 103 第 5 章 面板及布局类 表 5-3 tools 配置项 id 与按钮图标对应关系表 按钮 Id 对应效果 按钮 Id 对应效果 toggle Close minimize Maximize restore Gear pin Unpin right Left up Down refresh Minus plus Help search Save 在介绍完面板组件的主要配置项和常用方法之后,分别来看 2 个简单的示例,了解一下 面板的基本用法。 5.1.3 使用 Ext.Panel 本节主要介绍常用的面板使用方法,并结合示例介绍 5.1.2 节中常用配置项的使用及效 果,以使读者有一个形象的认识。对于面板最重要的功能和作用就是在其中显示各种不同来 源的内容,分为 4 个示例分别讲解 4 种不同的方式为面板提供显示内容,它们分别是:  使用 autoLoad 配置项为面板加载远程页面。  使用 contentEl 配置项为面板加载本地资源。  使用 html 配置项自定义面板内容。  使用 items 配置项在面板中添加组件。 这 4 种方式可以灵活的为面板提供各种需要显示的内容,掌握它们是掌握面板使用方式 的基础,在接下来的示例中会逐一看到它们的用法和效果。在拾宝网中也引用了这一效果, 可以进去看看。 1. 使用 autoLoad 配置项为面板加载远程页面 在本例中创建一个面板用于加载远程页面,示例中主要使用了 autoLoad 配置项设置要 加载的远程页面 url 地址,同时展示了面板折叠和滚动条的效果,请看下面的示例代码。 代码 5-2:使用 autoLoad 配置项加载远程页面示例
代码 5-2 演示了设置面板的 autoLoad 配置项加载指定页面的方式,从下面的截图中可 以看到,当面板初始化时自动加载了指定的 page1.html 页面,并且在页面内容超出面板大小 时自动显示滚动条。效果如图 5-2~5-4 所示。 图 5-2 面板加载远程页面读取状态 图 5-3 面板加载远程页面读取完毕 图 5-4 面板收缩状态 2. 使用 contentEl 配置项为面板加载本地资源 上例介绍了面板加载远程页面的方法,它是非常实用的方式,但是在有些情况下并不需 要读取一份远程的页面,而只是将本页面中的已有部分展示在面板中,这就用到了 contentEl 配置项,它的作用就是指定在面板中所要显示的本地资源 id,看下面的示例代码。 代码 5-3:使用 contentEl 配置项加载本地资源示例 展开和收缩按钮, 箭头向下表示展开 内容溢出后自 动出现滚动条 展开和收缩按钮, 箭头向上表示收缩 105 第 5 章 面板及布局类
本地资源---员工列表
序号姓名
1张三
2李四
3王五
4赵六
5陈七
6杨八
7刘九
在代码 5-3 中可以看到员工列表并没有通过请求远程页面得到,而是直接将本页面中已 存在的一份 table 表格作为内容展示在了面板当中,这种方式省略了远程页面的读取过程, 显示速度快,适合于展示简单的本地资源。同时在示例中还展示了自动高度与固定高度的不 同效果,自动高度会根据展示内容的实际高度自动调整面板高度,所以在面板内部并没有出 现滚动条。运行效果如图 5-5 和 5-6 所示。 图 5-5 面板加载本地资源固定高度 图 5-6 面板加载本地资源自动高度 3. 使用 html 配置项自定义面板内容 在上面 2 个示例中,不管是远程页面还是本地资源加载的都是已存在的页面内容。接下 来介绍自定义面板内容的实现方式,可以自己编写 HTML 代码来定义自己需要的展示效果, 示例使用面板的 html 配置项,通过它就可以实现自定义面板内容的目的,看下面的示例。 代码 5-4:使用 html 配置项自定义面板内容示例 图 5-7 与图 5-5 中展示的页面效果完全相同,但是它们却使用了完全不同的产生方式, html 配置项给了我们动态组织面板内容的途径,在代码 5-7 中首先创建了字符串数组 htmlArray,然后通过调用数组的 join 方法将数组内容连接为整体供程序使用,读者也可以 使用“+”进行字符串连接,这两种连接方式对程序的执行并没有任何影响。 图 5-7 使用 html 配置项自定义面板内容 4. 使用 items 配置项在面板中添加组件 在学习完前面 3 种为面板添加内容的方式之后,再介绍通过 items 配置项为面板添加组 件的方式,这也是最重要和常用的面板功能之一。通过使用 items 配置项不但可以向面板中 添加组件,还可以实现面板的多层嵌套,由于 items 既可以接受单个对象也可以接受数组为 参数,所以将分 2 个示例分别讲解。  向面板中添加单一组件 在代码 5-5 中将创建一个只包含日期选择组件的面板。 代码 5-5:使用 items 配置项添加单一组件示例 代码 5-5 演示了向面板添加单一组件的方法,其中 items 配置项是向面板中添加组件的 主要方式,在代码 5-6 中会演示向面板中添加多个组件的方法。运行效果如图 5-5 所示。 107 第 5 章 面板及布局类 图 5-8 通过 items 配置项向面板中添加一个组件  向面板中添加多个组件 可以向面板中添加普通组件,也可以向面板中添加子面板,因为面板(Ext.Panel)本身 也是组件,因此面板本身可以通过 items 配置项添加到父面板中,这样就形成了多层面板嵌 套的效果,这也是进行复杂页面布局的基础。下面是向面板添加多个组件的简单示例。 代码 5-6:使用 items 配置项添加多个组件示例 108 ExtJS 应用开发指南
本地资源---员工列表
序号姓名
1张三
2李四
3王五
代码 5-6 演示了向面板中添加多个组件的方法,items 配置项接受组件数组为参数依次 将组件添加到面板当中。效果如图 5-9 和 5-10 所示。 图 5-9 嵌套面板加载页面过程中 图 5-10 嵌套面板加载页面完成 5.2 标准布局类 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示 位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到 希望的位置上。ExtJS 通过提供多种布局类来为面板提供支持,主要包括如下 10 种:  ContainerLayout(容器布局)  FitLayout(自适应布局)  AccordionLayout(折叠布局)  CardLayout(卡片式布局)  AnchorLayout(锚点布局)  AbsoluteLayout(绝对位置布局)  FormLayout(表单布局)  ColumnLayout(列布局)  TableLayout(表格布局)  BorderLayout(边框布局) 接下来分别介绍这 10 种布局类的特点及使用方式。 5.2.1 ContainerLayout 容器布局 Ext.layout.ContainerLayout 提供了所有布局类的基本功能,它没有可视化的外观,只是 提供容器作为布局的基本逻辑,这个类通常被扩展而不通过 new 关键字直接创建。如果面 板(panel)没有指定任何布局类,则它将会作为默认布局来创建,表 5-4 是主要配置项。 表 5-4 Ext.layout.ContainerLayout 主要配置项目表 配置项 参数类型 说明 activeItem String/Number 一个对当前活动组件的引用。activeItem 只在那些一次只能显 示一个 items 项目的布局中生效,例如:Ext.layout.Accordion、 Ext.layout.CardLayout、Ext.layout.FitLayout 109 第 5 章 面板及布局类 5.2.2 FitLayout 自适应布局 Ext.layout.FitLayout 是布局的基础类,对应面板布局配置项(layout)的名称为 fit,使 用 fit 布局将使面板子元素自动充满容器,如果在当前容器中存在多个子面板则只有第一个 会被显示。 注意:在本节的示例之前会简单的介绍新概念,组件的 xtype 类型。xtype 类型相当于 组件的别名,通过使用 xtype 类型可以实现组件的延时创建,将在第 12 章中对其详细 说明,并提供一般组件对应 xtype 类型的详细列表。在后续的示例中会大量使用 xtype 来创建组件,这将有利于读者形成使用 xtype 的习惯,而减少 new 关键字的使用。 下面是自适应布局的一个简单的示例。 代码 5-7:FitLayout(自适应布局)示例 在代码 5-7 中共为外层面板添加了 2 个子面板,title 分别是“嵌套面板一”和“嵌套面 板二”,并指定外层面板的布局类型为 fit,由图 5-11 可以看到“嵌套面板一”充满了整个外 层面板,而“嵌套面板二”并没有显示出来。运行效果如图 5-11 所示。 图 5-11 Ext.layout.FitLayout 布局示例 110 ExtJS 应用开发指南 5.2.3 AccordionLayout 折叠布局 Ext.layout.Accordion 扩展自 Ext.layout.FitLayout 布局,对应面板布局(layout)配置项 的名称为 accordion。该布局会包含多个子面板,任何时候都只有一个子面板处于打开状态, 每个子面板都内置了对展开和收缩功能的支持。表 5-5 列出了它的主要配置项目。 表 5-5 Ext.layout.Accordion 主要配置项目表 配置项 参数类型 说明 activeOnTop Boolean 是否保持展开的子面板处于父面板的顶端,true 则交换当前展开面板 到顶端,false 则保持原来的位置不动。 animate Boolean 设置在展开或收缩子面板时是否使用滑动方式,true 则采用滑动方 式,默认为 false。 fill Boolean 设置子面板是否自动调整高度充满父面板的剩余空间,true 则充满, 默认为 true。 hideCollapseTool Boolean 设置是否隐藏子面板的 “展开收缩” 按钮,true 表示隐藏,false 表示显示,默认为 false。如果设置为 true,则应使 titleCollapse 配置 项也为 true。 titleCollapse Boolean 设置是否允许通过点击子面板的标题来展开或收缩面板,true 表示允 许,默认为 true。 下面是折叠布局的一个简单的示例。 代码 5-8:AccordionLayout(折叠布局)示例 代码 5-8 所示 Accordion 布局可以在多个不同的子面板之间切换,适合于表现大量的分 组内容或制作可以伸展的分组菜单,在开发中使用较多的布局类,效果如图 5-12~5-13 所示。 图 5-12 Ext.layout.Accordion 布局示例 图 5-13 Ext.layout.Accordion 布局示例 5.2.4 CardLayout 卡片式布局 Ext.layout.CardLayout 扩展自 Ext.layout.FitLayout 布局,对应面板布局(layout)配置项 的名称为 card。该布局会包含多个子面板,任何时候都只有一个子面板处于显示状态,这种 布局类经常用来制作向导和标签页。该布局的重点方式是 setActiveItem,因为一次只能显示 一个子面板,所以切换子面板的唯一途径就是调用 setActiveItem 方法,它接受一个子面板 id 或索引作为参数。CardLayout 布局并没有提供一个子面板的导航机制,导航逻辑需要开发 人员自己实现。Ext.layout.CardLayout 主要方法如表 5-6 所示。 表 5-6 Ext.layout.CardLayout 主要方法表 方法名 说明 setActiveItem( String/Number item ) : void 根据子面板 id 或索引切换当前显示的子面板 下面是卡片式布局的一个简单的示例。 代码 5-9:CardLayout(卡片式布局)示例 代码 5-9 演示了 CardLayout 卡片式布局的使用方式,这里的重点是调用面板布局的 setActiveItem 方法激活指定 id 的子面板进行显示,其中 changePage 函数的用途是计算点击 上一页或下一页之后将要显示的子面板 id,然后将该 id 传入到 setActiveItem 方法中实现子 面板的切换。运行效果如图 5-14~5-15 所示。 113 第 5 章 面板及布局类 图 5-14 Ext.layout.CardLayout 布局示例 图 5-15 Ext.layout.CardLayout 布局示例 5.2.5 AnchorLayout 锚点布局 Ext.layout.AnchorLayout 是根据容器大小为其所包含的子面板进行定位的布局,对应面 板布局(layout)配置项的名称为 anchor。如果容器大小发生变化,所有子面板的位置都会 根据规则重新计算,并自动渲染。使用 anchor 布局需要注意以下配置项的使用。  anchorSize(父容器提供) anchor 布局提供了 anchorSize 配置项用来设置虚拟容器的大小,默认情况下 anchor 布 局是根据容器自身的大小来进行计算定位的,如果提供了 anchorSize 属性则 anchor 布局就 会根据该尺寸生成一个虚拟容器,然后根据这个虚拟容器的大小来进行计算定位。  anchor(子容器提供) 加入到使用 anchor 布局面板中的子面板也都支持一个 anchor 配置项,它是一个包含 2 个值的字符串,水平值和垂直值,例如:'100% 50%',这个值告知父容器应该怎样为加入到 其中的子面板进行定位,有效值包括如下 3 类。  百分比(Percentage):1-100 之间的任意百分比,第 1 项数值表示子面板占父容器 宽度的百分比,第 2 项数值表示子面板占父容器宽高的百分比,例如'100% 50%'表示,子面 板宽度为父容器的 100%,而高度为父容器的 1/2,如果只提供一个值(如:'50%')则只对 子面板的宽度生效,高度保持默认值。  偏移值(Offsets):任意整数,可以为正数也可以是负数,第 1 项数值表示子面板 到父容器右边缘的偏移量,第 2 项数值表示子面板到父容器下边缘的偏移量,例如'-50 -100' 表示,子面板距父容器的右边缘偏移 50 像素,即子面板的宽度为父容器的宽度减去 50 像素; 子面板距父容器的下边缘偏移 100 像素,即子面板高度为父容器的高度减去 100 像素。如果 只提供一个值(如:'-50')则只对子面板的宽度生效,高度保持默认值。  参考边(Sides):有效的值包括 'right'(或 'r')和'bottom'(或 'b')。 要求容器设置 固定的大小或提供相应的 anchorSize 配置项才会有正确的效果,例如'r b',说明父容器会计 算与子容器宽度和高度的差值,然后按父容器体(body)的实际宽度和高度减去这个差值, 重新为子面板定位。 以上 3 种赋值类型可以组合使用,例如'-50 75%',下面将分别针对这 3 种情况举例说明。 1. 百分比(Percentage)定位 在代码 5-10 中创建一个使用百分比方式为子面板进行定位的示例,从示例中可以清晰 的体会到百分比定位的特点。 代码 5-10:百分比(Percentage)定位示例 代码 5-10 演示了百分比(Percentage)定位的使用方式,其中 anchor : '50% 50%'决定了 子面板的高度和宽度都为父面板的 50%。运行效果如图 5-16 所示。 图 5-16 Ext.layout.AnchorLayout 布局示例(百分比定位) 从图 5-10 中可以看到,子面板的宽度和高度都各占了父容器的一半,达到了布局要求。 2. 偏移值(Offsets)定位 在代码 5-11 中创建一个使用偏移值为子面板进行定位的示例,从示例中可以清晰的体 会到偏移值定位的特点。 代码 5-11:偏移值(Offsets)定位示例 代码 5-11 演示了偏移值(Offsets)定位的使用方式,其中 anchor : '-10 -10',决定了子面 板到父面板的右边和下边都为 10 像素。运行效果如图 5-17 所示。 图 5-17 Ext.layout.AnchorLayout 布局示例(偏移值定位) 从图 5-11 中可以看到,子面板的宽度和高度都距父容器 10 像素宽,达到了布局要求。 3. 参考边(Sides)定位 在代码 5-12 中创建一个使用参考边为子面板进行定位的示例,从示例中可以清晰的体 会到参考边定位的特点。 代码 5-12:参考边(Sides)定位示例 代码 5-12 演示了参考边(Sides)定位的使用方式,其中 anchor : 'r b',,决定了子面板将 相对于父面板的右边和底边的差值进行定位。运行效果如图 5-18 所示。 116 ExtJS 应用开发指南 图 5-18 Ext.layout.AnchorLayout 布局示例(参考边定位) 在代码 5-12 中使用参考边为子面板进行定位,下面给出了计算过程的简要说明: 宽度计算: 父容器体(body)宽度为 = 298(说明:300 减去左右两条边的宽度) 宽度差值为 = 100(说明:父容器体(body)宽度 300 – 子容器宽度 200) 计算后的子容器宽度为 = 198(说明: 298 - 100) 高度计算: 父容器体(body)高度为 = 123(说明:150 减去上下两条边的宽度和 header 的高度) 高度差值为 = 50(说明:父容器高度 150 – 子容器高度 100) 计算后的子容器高度为 = 73(说明:123 -50) 5.2.6 AbsoluteLayout 绝对位置布局 Ext.layout.AbsoluteLayout 扩展自 Ext.layout.AnchorLayout 布局,对应面板布局(layout) 配置项的名称为 absolute。它可以根据子面板中配置的 x/y 坐标进行定位,并且坐标值支持 使用固定值和百分比两种形式。下面是绝对位置布局的简单的示例。 代码 5-13:AbsoluteLayout 绝对位置布局示例 代码 5-13 演示了 AbsoluteLayout(绝对位置布局)的使用方式,在示例中子面板的 x、 y 配置项决定了它在父面板中的具体位置。运行效果如图 5-19 所示。 图 5-19 Ext.layout.AbsoluteLayout 布局示例 5.2.7 FormLayout 表单布局 Ext.layout.FormLayout 是为表单特殊设计的布局,用来管理表单字段的显示,通常情况 下直接使用 Ext.form.FormPanel 表单面板,因为它已经内置了表单布局,并且提供了表单提 交、读取等表单的功能。使用 form 布局的容器可以使用是些表单特有的配置项,它们包括:  hideLabels: (Boolean) :是否隐藏字段标签,默认为 false。  itemCls: (String) :每个字段项和字段标签上的样式类,默认值为'x-form-item'。  labelAlign: (String) : 字段标签的对齐方式,默认为空表示左对齐。  labelPad: (Number) : 字段标签与字段直接的空白,默认为 5,该项只在提供 labelWidth 配置项的情况下生效。  labelWidth: (Number) :字段标签的宽度,默认为 100。 任何组件都可以加入到表单布局的容器当中,但是扩展自 Ext.form.Field 类的组件可以 支持一些表单项的特殊属性,它们包括:  clearCls: (String) :应用到专门的清除 div 上的样式,默认为'x-form-clear-left'。  fieldLabel: (String) :字段标签上的文本,默认为''。  hideLabel: (Boolean) :设置是否隐藏标签和分割符,默认为 false。  itemCls: (String) :应用到表单字段及标签上的样式类,默认为'x-form-item'。  labelSeparator: (String) :字段标签和字段本身直接的分隔符,默认为':'。  labelStyle: (String) :应用到字段标签上的样式类。 Ext.layout.FormLayout 主要配置项目如表 5-7 所示。 表 5-7 Ext.layout.FormLayout 主要配置项目表 配置项 参数类型 说明 elementStyle String 应用到每一个布局中元素上的样式类,默认为'' labelSeparator String 字段标签与字段本身直接的分隔符,默认为':'。 如果布局和面板中同时配置了 labelSeparator,则面板中的设 置会覆盖布局中的设置。 labelStyle String 应用到每一个字段标签上的样式类,默认为''。 118 ExtJS 应用开发指南 下面是表单布局的简单的示例,在示例中创建了一个包含用户名和密码 2 个输入字段的 面板,这个面板最终生成的效果与第 4 章中介绍的 FormPanel 相同。 代码 5-14: FormLayout(表单布局)示例 代码 5-14 演示了 FormLayout(表单布局)的使用方式,通过表单布局创建的面板与使 用 FormPanel 创建的表单面板功能相同。运行效果如图 5-20 所示。 图 5-20 Ext.layout.FormLayout 布局示例 5.2.8 ColumnLayout 列布局 Ext.layout.ColumnLayout 对应面板布局 layout 配置项的名称为 column。这是一种多列风 格的布局样式,每一列的宽度都可以根据百分比或固定值来进行设置,高度允许根据内容进 行变化,它支持一个特殊的属性 columnWidth,每一个加入到容器中的子面板都可以通过 columnWidth 配置项指定百分比或使用 width 配置项指定固定值,来确定列宽。 width 配置项是以像素为单位的固定宽度,必须是大于或等于 1 的数字。columnWidth 配置项是已百分比为单位的相对宽度,必须是大于 0 小于 1 的小数,例如“.25”。 119 第 5 章 面板及布局类 注意:所有列的 columnWidth 值相加必须等于 1。 1. 指定固定列宽 代码 5-15 中将创建了包含 2 个子面板的列布局示例,并指定列的固定宽度为 100,看 下面的代码。 代码 5-15:指定固定列宽示例 代码 5-15 演示了 ColumnLayout(列布局)指定固定列宽的用法,子面板的 width 配置 项用于设置列宽。运行效果如图 5-21 所示。 图 5-21 Ext.layout.ColumnLayout 布局示例(固定列宽) 2. 使用百分比指定列宽 在代码 5-16 中将创建了一个包含 2 个子面板的列布局示例,并分别指定列的相对宽度 120 ExtJS 应用开发指南 为 30%和 70%(30%用.3 表示,70%用.7 表示),看下面的代码。 代码 5-16:使用百分比指定列宽示例 代码 5-16 演示了 ColumnLayout(列布局)使用百分比指定列宽的用法,子面板的 columnWidth 配置项用于设置列对应的百分比。运行效果如图 5-22 所示。 图 5-22 Ext.layout.ColumnLayout 布局示例(百分比列宽) 3. 固定值与百分比结合使用 在代码 5-17 中创建了包含 3 个子面板的列布局示例,为“子面板一”指定固定宽度 100, “子面板二”相对宽度为 30%,“子面板三”的相对宽度为 70%,请看下面的代码。 代码 5-17:固定值与百分比结合使用示例 在代码 5-17 中同时使用了固定值和百分比两种方式来指定列宽,通过观察图 5-17 可以 看到,固定值优先于百分比进行计算,也就是说百分比计算的基础宽度是父容器的宽度减去 固定列宽之后剩余的宽度值。运行效果如图 5-23 所示。 图 5-23 Ext.layout.ColumnLayout 布局示例(固定值与百分比结合) 下面以一个简单的公式进行说明: 第一列宽度 = 100 (说明,第一列是通过 width 配置项指定的固定值)。 第二列宽度 = (350 – 100 )* 0.3 (说明:按比例分割剩余宽度)。 第三列宽度 = (350 – 100 )* 0.7 (说明:按比例分割剩余宽度)。 5.2.9 TableLayout 表格布局 Ext.layout.TableLayout 对应面板布局 layout 配置项的名称为 table。这种比较允许你非常 122 ExtJS 应用开发指南 容易的渲染内容到 HTML 表格中,可以指定列数(columns),跨行(rowspan),跨列(colspan), 可以创建出复杂的表格布局。 注意:必须使用 layoutConfig 属性来指定属于此布局的配置,table 布局仅有唯一的 布局配置项 columns,而包含在其中的子面板会具有 rowspan 和 colspan 两个配置项。 下面是表格布局的一个简单的示例。 代码 5-18:TableLayout(表格布局)示例 代码 5-18 演示了 TableLayout(表格布局)的使用方式,其中子面板的 colspan 和 rowspan 配置项决定了它跨列和跨行的数量,另外需要指出的是,子面板在父面板中是从上到下由左 至右进行顺序排列的。效果如图 5-24 所示。 图 5-24 Ext.layout.TableLayout 布局示例 123 第 5 章 面板及布局类 5.2.10 BorderLayout 边框布局 Ext.layout.BorderLayout 对应面板布局 layout 配置项的名称为 border。该布局包含多个 子面板,是一个面向应用的 UI 风格的布局,它将整个容器分为 5 个部分,分别是:east、south、 west、north、center。加入到容器中的子面板需要指定 region 配置项来告知容器要加入到那 个部分,并且该布局还内建了对面板分隔栏的支持。下面是边框布局的一个简单的示例。 为了进行说明,将在代码 5-19 中创建一个包含全部 border 布局部分的示例,这个示例 可以形象的展示 border 布局的结构。 代码 5-19:BorderLayout(边框布局)示例 运行代码 5-19 会得到如下页面效果,从图中可以看到整个页面分为 5 个部分,这里重 点是对 region 配置项的使用,它决定了子面板在 border 布局的显示,效果如图 5-25 所示。 124 ExtJS 应用开发指南 图 5-25 Ext.layout.BorderLayout 布局示例 5.3 使用 ViewPort Ext.Viewport 代表浏览器窗口的整个显示区域,将 document body 作为渲染对象,它会 根据浏览器窗口的大小自动调整自身的尺寸,在一个页面中只允许出现一个 ViewPort 实例, 此外它没有提供对滚动条的支持,如果需要使用滚动条应该在其子面板中进行设置。 在上节的代码 5-9 中将一个 div 作为 border 布局渲染的目标,这在实际的项目中并不多 见,一般更常用的方式是将 border 布局的主面板渲染到 ViewPort 中,以使主面板充满整个 浏览器的显示空间,下面是一个简单的示例。 代码 5-20:ViewPort 使用示例 代码 5-20 演示了 Ext.Viewport 结合'border'布局的使用方式,如图 5-26 所示,两者的结 合完美的实现了页面整体结构的划分,是构建主页面常用的方式,效果如图 5-26 所示。 125 第 5 章 面板及布局类 图 5-26 Ext.Viewport 布局示例 5.4 TabPanel 页签 Ext.TabPanel 扩展自 Ext.Panel 组件的每个 tab 页都是一个 Ext.Panel,一般情况下会有多 个 tab 同时存在,但是同一时刻只有一个处于活动状态。在本节将分 3 个示例分别介绍不同 的 tab 页产生方式,每一种方式都有自己的特点和适用范围,可以满足不同的开发需要。表 5-8 列出了 Ext.TabPanel 的主要配置项,会在后续的示例中用到其中的部分内容。 表 5-8 Ext.TabPanel 主要配置项目表 配置项 参数类型 说明 activeTab String/Number 设置默认激活的 tab 页,参数为 tab 页的 id 或索引值。 animScroll Boolean 设置是否在 tab 页滚动的时候起用动画效果,true 则使用,默 认为 true。该项只在 enableTabScroll = true 时生效。 autoTabSelector String 用于在 dom 中自动查找 div 的样式选择器,只在 autoTabs = true 时生效,默认值是'div.x-tab' autoTabs Boolean 设置是否在dom中查找样式类为'x-tab'的div,并将其转换为tab 页,true 则进行查找,默认为 false。 enableTabScroll Boolean 设置是否在 tab 标签总宽度超出可用宽度时自动出现滚动按 钮,true 则出现。默认值为 false。 layoutOnTabChange Boolean 设置是否在 tab 页切换时重新对 tab 页元素进行布局。 minTabWidth Number tab 标签的最小宽度,默认为 30,只在 resizeTabs=true 时生效。 resizeTabs Boolean 设置是否允许 tab 标签自动调整宽度。 scrollDuration Float 设置每次滚动 tab 页执行动画的时间,单位是毫秒,默认值 是.35。该项只在 animScroll = true 时生效。 scrollIncrement Number 设置每次滚动 tab 标签的长度,单位是像素,默认值是 100。 该项只在 enableTabScroll = true 时生效。 scrollRepeatInterval Number 设置当 tab 页滚动按钮被持续按下时(即鼠标左键连续按下, 而不是点击),执行滚动操作的时间间隔。单位是毫秒。 tabMargin Number 以像素为单位计算的空白空间,计算 tab 标签大小和滚动尺寸。 tabPosition String tab 标签在面板上的位置,包括'top'和'bottom',默认值是'top' 126 ExtJS 应用开发指南 tabWidth Number 设置 tab 页 的 初 始 宽 度 , 默 认 为 120 像 素 。 该 项 只 在 resizeTabs=true 时生效。 1. 通过 items 添加标签页 在本例中使用通常的 items 配置项创建多个 tab 标签页,并设置当标签页超宽时自动出 现标签页滚动按钮,请看下面的示例代码。 代码 5-21:通过 items 添加标签页示例 代码 5-21 演示了通过 items 配置项向 TabPanel 中添加标签页的实现方式,标签页按照 子面板加入 items 的顺序排列。运行效果如图 5-27 所示。 图 5-27 Ext.TabPanel(items)示例 2. 通过页面 div 自动添加标签页 在代码 5-22 中通过使用 items 配置项创建了所需的 tab 页,但这并不是创建 tab 页的唯 一方式,Ext.TabPanel 还提供了自动查找页面中有效 div 并自动将其转换为 tab 页的功能, 为 tab 页的生成提供了新的方法。 所谓有效的 div,是指该 div 必须处于 Ext.TabPanel 渲染目标 html 元素的内部(即 applyTo 配置项指定的 html 元素),该 div 必须具有正确的样式类,默认值为'x-tab',如果不使用默认 值则需要设置为 autoTabSelector 配置项指定的样式类。代码 5-22 是简单的示例,用于通过 示例更好的理解相关概念。 代码 5-22:通过页面 div 自动添加标签页示例
tab 标签页 1 内容
tab 标签页 2 内容
tab 标签页 3 内容
tab 标签页 4 内容
tab 标签页 5 内容
tab 标签页 6 内容
代码 5-22 演示了自动添加页面 div 为 TabPanel 标签页示的方式。效果如图 5-28 所示。 图 5-28 Ext.TabPanel(转换 div 即时渲染)示例 图 5-29 Ext.TabPanel(转换 div 延时渲染)示例 仔细阅读代码 5-22,会发现第 6 个 div 并没有像其它 5 个 div 那样放在
的内部,而是放在了外部,由前面可知,前 5 个 div 位置正确是有效的 div,而第 6 个是无效的 div,从图 5-28 中也可以看到第 6 个 div 没有进行转换而是保持了原始状态,应 在项目开发中避免出现类似的错误。 注意:应该设置 Ext.TabPanel 处于立即渲染状态,即设置 deferredRender 为 false, 因为在延时渲染的情况下只有当前处于活动状态的 tab 页才会被渲染,那将导致 5 个 有效的 div 中第一个被正常转换,而其余 4 个保持原始状态显示出来,效果如图 5-29 中所示,这也是一个应该避免发生的错误。 3. 动态添加标签页 前两个示例中 tab 页都是通过静态方式创建的,但是在实际应用中对 tab 页的动态添加 和删除也是非常重要的操作,应此在示例 3 中会创建一个支持动态添加和删除 tab 页的简单 应用,在示例中通过调用 Ext.TabPanel 的 add()方法实现动态添加效果,通过设置 tab 页 的配置项 closable,为 true 在 tab 标签上显示一个关闭按钮来实现删除效果,示例代码如下。 第六个 div 并没 有被正确的转换 为一个 tab 页 128 ExtJS 应用开发指南 代码 5-23:动态添加标签页示例 运行效果如图 5-30 和 5-31 所示。 图 5-30 初始状态的标签页 图 5-31 动态增加的标签页 5.5 通过布局嵌套实现表单元素横排 第 4 章介绍表单组件 Ext.form.Checkbox 和 Ext.form.Radio 时,介绍过使用样式表实现 表单元素横排的方法,当时提到通过布局嵌套也可以达到表单元素横排的效果,在本章的最 后,来演示一下这种实现方式,以加深读者对布局的理解。在示例中直接使用 Ext.form.FormPanel(表单面板),在其中嵌套使用 column 布局来实现横排效果。示例如下: 代码 5-24:通过布局嵌套实现表单元素横排示例 代码 5-24 演示了布局嵌套实现表单元素横排的实现方式,这种方式不但可以用在表单 元素的横排上,它可以用在更广泛的场合,将各种布局组合使用达到精确定位页面元素的目 的。运行效果如图 5-32 所示。 图 5-32 通过布局嵌套实现表单元素横排 5.6 本章小结 到这里我们已经完成了对 ExtJS 面板及布局相关内容的学习,现在我们来进行一下简短 的回顾,首先我们介绍了 ExtJS 的 Panel 面板组件列举了它的主要配置项及常用方法,这里 的重点是掌握向面板中添加内容的不同方式,其次我们介绍了 ExtJS 的各种标准布局类,这 里的重点是掌握各种布局类的异同,并选择使用正确的布局类,最后我们介绍了 ViewPort、 TabPanel 及通过布局嵌套实现表单元素横排,这些内容同样非常重要,需要读者认真掌握。
还剩31页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 5 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

faith789510

贡献于2013-04-27

下载需要 5 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf