Panel的10种布局

《Panel的10种布局》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、EXT标准布局类收藏面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种：   ContainerLayout（容器布局）   FitLayout（自适应布局）   AccordionLayout（折叠布局）   CardLayout（卡片式布局）   AnchorLayout（锚点布局）   AbsoluteLayout（绝对位置布

2、局）   FormLayout（表单布局）   ColumnLayout（列布局）   TableLayout（表格布局）   BorderLayout（边框布局）接下来分别介绍这10种布局类的特点及使用方式。1 ContainerLayout容器布局   Ext.layout.ContainerLayout提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过new关键字直接创建。如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建，表5-4是主

3、要配置项。表5-4 Ext.layout.ContainerLayout主要配置项目表配置项参数类型说明activeItemString/Number一个对当前活动组件的引用。activeItem只在那些一次只能显示一个items项目的布局中生效，例如：Ext.layout.Accordion、Ext.layout.CardLayout、Ext.layout.FitLayout 2 FitLayout自适应布局   Ext.layout.FitLayout是布局的基础类，对应面板布局配置项（layout）的名称为

4、fit，使用fit布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。   注意：在本节的示例之前会简单的介绍新概念，组件的xtype类型。xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延时创建。在后续的示例中会大量使用xtype来创建组件，这将有利于读者形成使用xtype的习惯，而减少new关键字的使用。   下面是自适应布局的一个简单的示例。   代码5-7：FitLayout（自适应布局）示例 

5、 Ext.onReady(function(){ Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif'; varpanel=newExt.Panel({  layout:'fit',  title:'Ext.layout.FitLayout布局示例',  frame:true,                 //渲染面板  height:150,  width:250,  applyTo:'panel',  defaults:{ 

6、                //设置默认属性   bodyStyle:'background-color:#FFFFFF'      //设置面板体的背景色  },//面板items配置项默认的xtype类型为panel，该默认值可以通过defaultType配置项进行更改  items:[   {    title:'嵌套面板一',    html:'面板一'   },   {    title:'嵌套面板二',    html:'面板二'   }  ] }) });    在代码5-7中

7、共为外层面板添加了2个子面板，title分别是“嵌套面板一”和“嵌套面板二”，并指定外层面板的布局类型为fit，由图5-11可以看到“嵌套面板一”充满了整个外层面板，而“嵌套面板二”并没有显示出来。运行效果如图5-11所示。图5-11 Ext.layout.FitLayout布局示例3 AccordionLayout折叠布局   Ext.layout.Accordion扩展自Ext.layout.FitLayout布局，对应面板布局（layout）配置项的名称为accordion。该布局会包含多个子面板，任何时候

8、都只有一个子面板处于打开状态，每个子面板都内置了对展开和收缩功能的支持。表5-5列出了它的主要配置项目。表5-5 Ext.layout.Accordion主要配置项目表配置项 参数类型说明activeOnTop Boolean是否保持展开的子面板处于父面板的顶端，true则交换当前展开面板到顶端，false则保持原来的位置不动。animate Boolean设置在展开或收