Panel的10种布局.docVIP

? EXT标准布局类 收藏 面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种：??? ContainerLayout（容器布局）??? FitLayout（自适应布局）??? AccordionLayout（折叠布局）??? CardLayout（卡片式布局）??? AnchorLayout（锚点布局）??? AbsoluteLayout（绝对位置布局）??? FormLayout（表单布局）??? ColumnLayout（列布局）??? TableLayout（表格布局）??? BorderLayout（边框布局） 接下来分别介绍这10种布局类的特点及使用方式。 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 ? 2? FitLayout自适应布局 ??? Ext.layout.FitLayout 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。 ??? 注意：在本节的示例之前会简单的介绍新概念，组件的xtype类型。xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延时创建。在 后续的示例中会大量使用xtype来创建组件，这将有利于读者形成使用xtype的习惯，而减少new关键字的使用。 ??? 下面是自适应布局的一个简单的示例。 ??? 代码5-7：FitLayout（自适应布局）示例 ? script type=text/javascript ?Ext.onReady(function(){ ? Ext.BLANK_IMAGE_URL =../../extjs2.0/resources/images/default/s.gif; ? var panel = new Ext.Panel({ ?? layout :fit, ?? title:Ext.layout.FitLayout布局示例, ?? frame:true,????????????????? //渲染面板 ?? height : 150, ?? width : 250, ?? applyTo :panel, ?? defaults : {????????????????? //设置默认属性 ??? bodyStyle:background-color:#FFFFFF?????? //设置面板体的背景色 ?? }, //面板items配置项默认的xtype类型为panel，该默认值可以通过defaultType配置项进行更改 ?? items: [ ??? { ???? title : 嵌套面板一, ???? html : 面板一 ??? }, ??? { ???? title : 嵌套面板二, ???? html : 面板二 ??? } ?? ] ? }) ?}); ? /script ??? 在代码5-7中共为外层面板添加了2个子面板，title分别是“嵌套面板一”和“嵌套面板二”，并指定外层面板的布局类型为fit，由图 5-11可以看到“嵌套面板一”充满了整个外层面板，而“嵌套面板二”并没有显示出来。运行效果如图5-11所示。图5-11? Ext.layout.FitLayout布局示例 3? AccordionLayout折叠布局 ??? Ext.layout.Accordion 扩展自 Ext.layout.FitLayout 布局，对应面板布局（layout）配置项的名称为accordion。该布局会包含多个子面板，任何时候都只有一个子面板处于打开状态，每个子面板