extjs面板及布局类.doc

ExtJS应用开发指南 ExtJS应用开发指南 第5章 面板及布局类 第5章 面板及布局类 PAGE 100 PAGE 129 PAGE 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示例 script type=text/javascript Ext.onReady(function(){ 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, bodyStyle:background-color:#FFFFFF, html:div面板体（body）/div, tools : [//设置面板头部功能区 {id:toggle}, {id:close}, {id:maximize} ], buttons:[ new Ext.Button({ text:面板底部（footer） }) ] }) }); /script 代码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。 applyTo Mixed 一个页面上已经存在的元素或元素id，组件将会追加到该元素的后面，而不是将其作为新组件的容器。 autoDestroy Boolean 设置是否自动销毁从容器中移除的组件，默认为true，否则要手工销毁 autoHeight Boolean 是否使用自动高度，tr