extjs面板及布局类

《extjs面板及布局类》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第5章面板及布局类第5章面板及布局类ExtJS不但在Web开发中成功引入了丰富的组件，也引入了桌面程序中经常用到的面板及布局概念。这些概念的引入在很大程度上改变了传统的Web开发方式，在第3章和第4章中主要学习了ExtJS支持的各种组件，本章将进一步学习ExtJS的面板（panel）及布局类。面板（panel）是ExtJS中一个很重要的概念，它相当于一幅画板，我们可以在它上面放置需要的各种组件，并使用不同的布局类对组件的摆放位置进行格式化，掌握这些布局类的特点及使用方式是突破ExtJS页面设计的关键，

2、下面先来进行面板部分的学习。本章内容提示：î面板panelî标准布局类î使用ViewPortîTabPanel页签î通过布局嵌套实现表单元素横排5.1面板panel使用过Delphi、VisualBasic或JavaSwing等开发语言的读者对面板（Panel）一定非常熟悉，我们可以在面板随意地排版布局，它就像是一副骨架撑起了整个用户界面，在ExtJS中面板同样起着页面骨架的作用，所以学习面板是学习ExtJS页面布局的基础和起点。ExtJS面板从使用方式上来说更接近于JavaSwing中的面板，通过为

3、其指定不同的布局方式或者进行面板嵌套达到复杂布局的目的，因此布局方式是否丰富，能否进行嵌套，是衡量ExtJS布局灵活性的重要指标。ExtJS面板共支持10种不同风格的布局样式，并且允许无限制的进行嵌套，这就给我们创造了一个尽情发挥的强大舞台。5.1.1认识Ext.PanelExt.Panel扩展自Ext.Container，是各种组件的容器也是基础类，可以扩展出功能更加强大的面板。作为标准的面板组件主要包括如下5部分：底部工具栏（bottomtoolbars）、顶部工具栏（toptoolbars）、面

4、板头部（header）、面板底部（footer）和面板体（body），下面是一个标准面板的示例，可以帮助读者更清晰的认识面板组件。代码5-1：Ext.Panel示例Ext.onReady(function(){129第5章面板及布局类Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';newExt.Panel({title:'面板头部（header）',tba

5、r:['顶端工具栏(toptoolbars)'],bbar:['底端工具栏(bottomtoolbars)'],height:200,width:300,frame:true,applyTo:'panel',bodyStyle:'background-color:#FFFFFF',html:'

6、({text:'面板底部（footer）'})]})});代码5-1演示了标准面板的创建方式，从图5-1中可以看到一个标准面板所具有的全部组成部分，这5部分不但位置不同功能也不尽相同，它们分别有自己存在的价值，读者可以根据业务需要选择使用其中合适的部分构成自己需要的页面。效果如图5-1所示。面板头部功能区图5-1标准面板5.1.2Ext.Panel的主要功能上节介绍了ExtJS面板的主要表现形式，接下来将介绍面板组件的主要配置项及常用方法，这些配置项及方法将在后面的示例中用到，可以把

7、这部分内容作为后续章节的铺垫，进行快速的浏览，Ext.Panel主要配置项目如表5-1所示。表5-1Ext.Panel主要配置项目表配置项参数类型说明animCollapseBoolean设置面板折叠或展开时是否显示动画效果，如果Ext.Fx类可用则默认为true，否则为fasle。129第5章面板及布局类applyToMixed一个页面上已经存在的元素或元素id，组件将会追加到该元素的后面，而不是将其作为新组件的容器。autoDestroyBoolean设置是否自动销毁从容器中移除的组件，默认为tr

8、ue，否则要手工销毁autoHeightBoolean是否使用自动高度，true则使用自动高度，false则使用固定高度，默认为falseautoLoadObject/String/Function设置面板自动加载的url地址。如果不为null则面板会尝试加载该url并立刻在面板中进行渲染。这个连接将变成面板的body元素，所以可以根据需要在任何时候刷新面板内容autoScrollBoolean设置是否自动显示滚动条，true则设置面板的body元素样式