ExtjsPanel的10种布局

XT标准布局类面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种：ContainerLayout（容器布局）FitLayout（自适应布局）AccordionLayout（折叠布局）CardLayout（卡片式布局）AnchorLayout（锚点布局）AbsoluteLayout（绝对位置布局）FormLayout（表单布局）ColumnLayout（列布局）TableLayout（表格布局）BorderLayout（边框布局）接下来分别介绍这10种布局类的特点及使用方式。1ContainerLayout容器布局Ext.layout.ContainerLayout提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过new关键字直接创建。如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建，表5-4是主要配置项。表5-4Ext.layout.ContainerLayout主要配置项目表配置项参数类型说明activeItemString/Number一个对当前活动组件的引用。activeItem只在那些一次只能显示一个items项目的布局中生效，例如：Ext.layout.Accordion、Ext.layout.CardLayout、Ext.layout.FitLayout2FitLayout自适应布局Ext.layout.FitLayout是布局的基础类，对应面板布局配置项（layout）的名称为fit，使用fit布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。注意：在本节的示例之前会简单的介绍新概念，组件的xtype类型。xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延时创建。在后续的示例中会大量使用xtype来创建组件，这将有利于读者形成使用xtype的习惯，而减少new关键字的使用。下面是自适应布局的一个简单的示例。代码5-7：FitLayout（自适应布局）示例scripttype=text/javascriptExt.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:{//设置默认属性bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色},//面板items配置项默认的xtype类型为panel，该默认值可以通过defaultType配置项进行更改items:[{title:'嵌套面板一',html:'面板一'},{title:'嵌套面板二',html:'面板二'}]})});/script在代码5-7中共为外层面板添加了2个子面板，title分别是“嵌套面板一”和“嵌套面板二”，并指定外层面板的布局类型为fit，由图5-11可以看到“嵌套面板一”充满了整个外层面板，而“嵌套面板二”并没有显示出来。运行效果如图5-11所示。图5-11Ext.layout.FitLayout布局示例3AccordionLayout折叠布局Ext.layout.Accordion扩展自Ext.layout.FitLayout布局，对应面板布局（layout）配置项的名称为accordion。该布局会包含多个子面板，任何时候都只有一个子面板处于打开状态，每个子面板都内置了对展开和收缩功能的支持。表5-5列出了它的主要配置项目。表5-5Ext.layout.Accordion主要配置项目表配置项参数类型说明activeOnTopBoolean是否保持展开的子面板处于父面板的顶端，true则交换当前展开面板到顶端，false则保持原来的位置不动。animateBoolean设置在展开或收缩子面板时是否使用滑动方式，true则采用滑动方式，默认为false。fillBoolean设置子面板是否自动调整高度充满父面板的剩余空间，true则充满，默认为true。hideCollapseToolBoolean设置是否隐藏子面板的“展开收缩”按钮，true表示隐藏，false表示显示，默认为false。如果设置为true，则应使titleCollapse配置项也为true。titleCollapseBoolean设置是否允许通过点击子面板的标题来展开或收缩面板，true表示允许，默认为true。下面是折叠布局的一个简单的示例。代码5-8：AccordionLayout（折叠布局）示例scripttype=text/javascriptExt.onReady(function(){Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';varpanel=newExt.Panel({layout:'accordion',layoutConfig:{activeOnTop:true,//设置打开的子面板置顶fill:true,//子面板充满父面板的剩余空间hideCollapseTool:false,//显示“展开收缩”按钮titleCollapse:true,//允许通过点击子面板的标题来展开或收缩面板animate:true//使用动画效果},title:'Ext.layout.Accordion布局示例',frame:true,//渲染面板height:150,width:250,applyTo:'panel',defaults:{//设置默认属性bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色},items:[{title:'嵌套面板一',html:'说明一'},{title:'嵌套面板二',html:'说明二'},{title:'嵌套面板三',html:'说明三'}]})});/script代码5-8所示Accordion布局可以在多个不同的子面板之间切换，适合于表现大量的分组内容或制作可以伸展的分组菜单，在开发中使用较多的布局类，效果如图5-12~5-13所示。4CardLayout卡片式布局Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局，对应面板布局（layout）配置项的名称为card。该布局会包含多个子面板，任何时候都只有一个子面板处于显示状态，这种布局类经常用来制作向导和标签页。该布局的重点方式是setActiveItem，因为一次只能显示一个子面板，所以切换子面板的唯一途径就是调用setActiveItem方法，它接受一个子面板id或索引作为参数。CardLayout布局并没有提供一个子面板的导航机制，导航逻辑需要开发人员自己实现。Ext.layout.CardLayout主要方法如表5-6所示。表5-6Ext.layout.CardLayout主要方法表方法名说明setActiveItem(String/Numberitem):void根据子面板id或索引切换当前显示的子面板下面是卡片式布局的一个简单的示例。代码5-9：CardLayout（卡片式布局）示例scripttype=text/javascriptExt.onReady(function(){Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';varpanel=newExt.Panel({layout:'card',activeItem:0,//设置默认显示第一个子面板title:'Ext.layout.CardLayout布局示例',frame:true,//渲染面板height:150,width:250,applyTo:'panel',defaults:{//设置默认属性bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色},items:[{title:'嵌套面板一',html:'说明一',id:'p1'},{title:'嵌套面板二',html:'说明二',id:'p2'},{title:'嵌套面板三',html:'说明三',id:'p3'}],buttons:[{text:'上一页',handler:changePage},{text:'下一页',handler:changePage}]})//切换子面板functionchangePage(btn){varindex=Number(panel.layout.activeItem.id.substring(1));if(btn.text=='上一页'){index-=1;if(index1){index=1;}}else{index+=1;if(index3){index=3;}}panel.layout.setActiveItem('p'+index);}});/script代码5-9演示了CardLayout卡片式布局的使用方式，这里的重点是调用面板布局的setActiveItem方法激活指定id的子面板进行显示，其中changePage函数的用途是计算点击上一页或下一页之后将要显示的子面板id，然后将该id传入到setActiveItem方法中实现子面板的切换。运行效果如图5-14~5-15所示。5AnchorLayout锚点布局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'（或