Panel的10种布局转.docx

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

2、eLayout（表格布局） BorderLayout（边框布局） 接下来分别介绍这10种布局类的特点及使用方式。 1 ContainerLayout容器布局 Ext.layout.ContainerLayout 提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过 new 关键字直接创建。如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建，表5-4是主要配置项。 表5-4 Ext.layout.ContainerLayout主要配置项目表配置项 参数类型 说明 activeItem String/Number 一个对当前活动

3、组件的引用。activeItem只在那些一次只能显示一个 items 项目的布局中生效，例如：Ext.layout.Accordion、Ext.layout.CardLayout、Ext.layout.FitLayout2 FitLayout自适应布局 Ext.layout.FitLayout 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。 注意：在本节的示例之前会简单的介绍新概念，组件的xtype类型。xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延时

4、创建。在 后续的示例中会大量使用xtype来创建组件，这将有利于读者形成使用xtype的习惯，而减少new关键字的使用。 下面是自适应布局的一个简单的示例。 代码5-7：FitLayout（自适应布局）示例 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, wid

5、th : 250, applyTo :panel, defaults : /设置默认属性 bodyStyle:background-color:#FFFFFF /设置面板体的背景色 , /面板items配置项默认的xtype类型为panel，该默认值可以通过defaultType配置项进行更改 items: title : 嵌套面板一, html : 面板一 , title : 嵌套面板二, html : 面板二 ) ); 在代码5-7中共为外层面板添加了2个子面板，title分别是“嵌套面板一”和“嵌套面板二”，并指定外层面板的布局类型为fit，由图 5-11可以看到“嵌套面板一”充满了整个

6、外层面板，而“嵌套面板二”并没有显示出来。运行效果如图5-11所示。图5-11 Ext.layout.FitLayout布局示例3 AccordionLayout折叠布局 Ext.layout.Accordion 扩展自 Ext.layout.FitLayout 布局，对应面板布局（layout）配置项的名称为accordion。该布局会包含多个子面板，任何时候都只有一个子面板处于打开状态，每个子面板都内 置了对展开和收缩功能的支持。表5-5列出了它的主要配置项目。表5-5 Ext.layout.Accordion主要配置项目表配置项 参数类型 说明 activeOnTop Boolean 是

7、否保持展开的子面板处于父面板的顶端，true则交换当前展开面板到顶端，false则保持原来的位置不动。animate Boolean 设置在展开或收缩子面板时是否使用滑动方式，true则采用滑动方式，默认为false。fill Boolean 设置子面板是否自动调整高度充满父面板的剩余空间，true则充满，默认为true。hideCollapseTool Boolean 设置是否隐藏子面板的 “展开收缩” 按钮，true表示隐藏，false表示显示，默认为false。如果设置为true，则应使titleCollapse配置项也为true。titleCollapse Boolean 设置是否允许

8、通过点击子面板的标题来展开或收缩面板，true表示允许，默认为true。 下面是折叠布局的一个简单的示例。 代码5-8：AccordionLayout（折叠布局）示例 Ext.onReady(function() Ext.BLANK_IMAGE_URL =././extjs2.0/resources/images/default/s.gif; var panel = new Ext.Panel( layout : accordion, layoutConfig : activeOnTop : true, /设置打开的子面板置顶 fill : true, /子面板充满父面板的剩余空间 hideC

9、ollapseTool: 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 :

10、 说明一 , title : 嵌套面板二, html : 说明二 , title : 嵌套面板三, html : 说明三 ) ); 代码5-8所示Accordion布局可以在多个不同的子面板之间切换，适合于表现大量的分组内容或制作可以伸展的分组菜单，在开发中使用较多的布局类，效果如图5-125-13所示。4 CardLayout卡片式布局 Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局，对应面板布局（layout）配置项的名称为 card。该布局会包含多个子面板，任何时候都只有一个子面板处于显示状态，这种布局类经常用来制作向导和标签页。该布局的重点

11、方式是 setActiveItem，因为一次只能显示一个子面板，所以切换子面板的唯一途径就是调用 setActiveItem 方法，它接受一个子面板id或索引作为参数。CardLayout布局并没有提供一个子面板的导航机制，导航逻辑需要开发人员自己实现。 Ext.layout.CardLayout主要方法如表5-6所示。表5-6 Ext.layout.CardLayout主要方法表方法名 说明 setActiveItem( String/Number item ) : void 根据子面板id或索引切换当前显示的子面板 下面是卡片式布局的一个简单的示例。 代码5-9：CardLayout（卡片

12、式布局）示例 Ext.onReady(function() Ext.BLANK_IMAGE_URL =././extjs2.0/resources/images/default/s.gif; var panel = new Ext.Panel( layout : card, activeItem : 0, /设置默认显示第一个子面板 title:Ext.layout.CardLayout布局示例, frame:true, /渲染面板 height : 150, width : 250, applyTo :panel, defaults : /设置默认属性 bodyStyle:backgroun

13、d-color:#FFFFFF;padding:15px /设置面板体的背景色 , items: title : 嵌套面板一, html : 说明一, id : p1 , title : 嵌套面板二, html : 说明二, id : p2 , title : 嵌套面板三, html : 说明三, id : p3 , buttons: text : 上一页, handler :changePage , text : 下一页, handler :changePage ) /切换子面板 function changePage(btn) var index = Number(panel.layout

14、.activeItem.id.substring(1); if(btn.text = 上一页) index -= 1; if(index 3) index = 3; panel.layout.setActiveItem(p+index); ); 代码 5-9 演示了 CardLayout 卡片式布局的使用方式，这里的重点是调用面板布局的setActiveItem方法激活指定id的子面板进行显示，其中changePage函数的用途是 计算点击上一页或下一页之后将要显示的子面板id，然后将该id传入到setActiveItem方法中实现子面板的切换。运行效果如图 5-145-15所示。5 Anch

15、orLayout锚点布局 Ext.layout.AnchorLayout 是根据容器大小为其所包含的子面板进行定位的布局，对应面板布局（layout）配置项的名称为 anchor。如果容器大小发生变化，所有子面板的位置都会根据规则重新计算，并自动渲染。使用anchor布局需要注意以下配置项的使用。 anchorSize（父容器提供） anchor 布局提供了 anchorSize 配置项用来设置虚拟容器的大小，默认情况下 anchor 布局是根据容器自身的大小来进行计算定位的，如果提供了 anchorSize 属性则 anchor 布局就会根据该尺寸生成一个虚拟容器，然后根据这个虚拟容器的大小

16、来进行计算定位。 anchor（子容器提供） 加入到使用 anchor布局面板中的子面板也都支持一个 anchor配置项，它是一个包含 2个值的字符串，水平值和垂直值，例如：100% 50%，这个值告知父容器应该怎样为加入到其中的子面板进行定位，有效值包括如下3类。 百分比（Percentage）：1-100之间的任意百分比，第1项数值表示子面板占父容器宽度的百分比，第2项数值表示子面板占父容器宽高的百分比， 例如100% 50%表示，子面板宽度为父容器的 100%，而高度为父容器的 1/2，如果只提供一个值（如：50%）则只对子面板的宽度生效，高度保持默认值。 偏移值（Offsets）：任意

17、整数，可以为正数也可以是负数，第1项数值表示子面板到父容器右边缘的偏移量，第2项数值表示子面板到父容器下边缘的偏移 量，例如-50 -100表示，子面板距父容器的右边缘偏移50像素，即子面板的宽度为父容器的宽度减去50像素；子面板距父容器的下边缘偏移100像素，即子面板高度 为父容器的高度减去100像素。如果只提供一个值（如：-50）则只对子面板的宽度生效，高度保持默认值。 参考边（Sides）：有效的值包括 right（或 r）和bottom（或 b）。要求容器设置固定的大小或提供相应的anchorSize配置项才会有正确的效果，例如r b，说明父容器会计算与子容器宽度和高度的差值，然后按父

18、容器体（body）的实际宽度和高度减去这个差值，重新为子面板定位。 以上3种赋值类型可以组合使用，例如-50 75%，下面将分别针对这3种情况举例说明。 1. 百分比（Percentage）定位 在代码 5-10 中创建一个使用百分比方式为子面板进行定位的示例，从示例中可以清晰的体会到百分比定位的特点。 代码5-10：百分比（Percentage）定位示例 Ext.onReady(function() Ext.BLANK_IMAGE_URL =././extjs2.0/resources/images/default/s.gif; var panel = new Ext.Panel( layo

19、ut : anchor, title:Ext.layout.AnchorLayout布局示例, frame:false, /渲染面板 height : 150, width : 300, applyTo :panel, defaults : /设置默认属性 bodyStyle:background-color:#FFFFFF;padding:15px /设置面板体的背景色 , items: anchor : 50% 50%, /设置子面板的宽高为父面板的50% title : 子面板 ) ); 代码5-10演示了百分比（Percentage）定位的使用方式，其中anchor : 50% 50%

20、决定了子面板的高度和宽度都为父面板的50%。运行效果如图5-16所示。图5-16 Ext.layout.AnchorLayout布局示例（百分比定位）2. 偏移值（Offsets）定位 在代码 5-11 中创建一个使用偏移值为子面板进行定位的示例，从示例中可以清晰的体会到偏移值定位的特点。 代码5-11：偏移值（Offsets）定位示例 Ext.onReady(function() Ext.BLANK_IMAGE_URL =././extjs2.0/resources/images/default/s.gif; var panel = new Ext.Panel( layout : ancho

21、r, title:Ext.layout.AnchorLayout布局示例, frame:false,/渲染面板 height : 150, width : 300, applyTo :panel, defaults : /设置默认属性 bodyStyle:background-color:#FFFFFF;padding:15px/设置面板体的背景色 , items: anchor : -10 -10, /设置子面板的宽高偏移父面板10像素 title : 子面板 ) ); 代码5-11演示了偏移值（Offsets）定位的使用方式，其中anchor : -10 -10,决定了子面板到父面板的右边

22、和下边都为10像素。运行效果如图5-17所示。图5-17 Ext.layout.AnchorLayout布局示例（偏移值定位）3. 参考边（Sides）定位 在代码 5-12 中创建一个使用参考边为子面板进行定位的示例，从示例中可以清晰的体会到参考边定位的特点。 代码5-12：参考边（Sides）定位示例 Ext.onReady(function() Ext.BLANK_IMAGE_URL =././extjs2.0/resources/images/default/s.gif; var panel = new Ext.Panel( layout : anchor, title:Ext.lay

23、out.AnchorLayout布局示例, autoScroll :true,/自动显示滚动条 frame:false,/渲染面板 height : 150, width : 300, applyTo :panel, defaults : /设置默认属性 bodyStyle:background-color:#FFFFFF;padding:15px/设置面板体的背景色 , items: anchor : r b, /相对于父容器的右边和底边的差值进行定位 width : 200, height : 100, title : 子面板 ) ); 代码5-12演示了参考边（Sides）定位的使用方式

24、，其中anchor : r b,决定了子面板将相对于父面板的右边和底边的差值进行定位。运行效果如图5-18所示。图5-18 Ext.layout.AnchorLayout布局示例（参考边定位） 在代码5-12中使用参考边为子面板进行定位，下面给出了计算过程的简要说明： 宽度计算： 父容器体(body)宽度为 = 298（说明：300减去左右两条边的宽度） 宽度差值为 = 100（说明：父容器体(body)宽度300 子容器宽度200） 计算后的子容器宽度为 = 198（说明： 298 - 100） 高度计算： 父容器体(body)高度为 = 123（说明：150减去上下两条边的宽度和heade

25、r的高度） 高度差值为 = 50（说明：父容器高度150 子容器高度100） 计算后的子容器高度为 = 73（说明：123 -50） 6 AbsoluteLayout绝对位置布局 Ext.layout.AbsoluteLayout扩展自Ext.layout.AnchorLayout布局，对应面板布局（layout）配置项的 名称为 absolute。它可以根据子面板中配置的 x/y坐标进行定位，并且坐标值支持使用固定值和百分比两种形式。下面是绝对位置布局的简单的示例。 代码5-13：AbsoluteLayout绝对位置布局示例 Ext.onReady(function() Ext.BLANK_IMAGE_URL =././extjs2