(Ext 基础篇) 布局

虾米姐 阅读:656 2021-04-01 10:17:57 评论:0

所谓布局,简单来说就是决定把什么东西放到什么位置上,对于管理软件来说,一般都是首部放标题,左边放菜单栏,空余的右下方用来显示具体的内容。本章将详细介绍EXT中布局的用法。

一、传统的布局方式

我们可以用Ext.Viewport类对整个页面进行整体布局,具体使用方法如下:

 

  1. var viewport=new Ext.Viewport({ 
  2.                 layout:'border'
  3.                 items:[{ 
  4.                     region:'north'
  5.                     height:40, 
  6.                     html:'<h1>薛敬明专栏</h1>' 
  7.                 },{ 
  8.                     region:'west'
  9.                     width:100, 
  10.                     html:'<p>菜单一</p><p>菜单二</p>' 
  11.                 },{ 
  12.                     region:'center'
  13.                     html:'主要内容' 
  14.                 }] 
  15.             }); 

相关属性:

layout:布局样式(border布局)

items:包含其他组件

region:组件位置

效果图如图1所示:

1

Fit布局

如果从复杂度来说fit布局应该算是最简单的了,设置是最少的。Fit布局同样也是设置父容器的layout属性,但是子容器不用设置任何相应属性。它的目的就是为了让子容器能够自适应于父容器(用了fit布局子容器设置宽度无效),但是请注意如果父容器有多个子容器,只会显示第一个。

[javascript] view plain copy print ?
  1. var pnSub1=new Ext.Panel({ 
  2.     title:"子panel1"
  3.     html:"子panel1(会显示)" 
  4. }); 
  5. var pnSub2=new Ext.Panel({ 
  6.     title:"子panel2"
  7.     html:"子panel2(不会显示)" 
  8. }); 
  9. var pn=new Ext.Panel({ 
  10.     renderTo:"divPanel"
  11.     title:"父panel"
  12.     width:800, 
  13.     height:200, 
  14.     layout:"fit"
  15.     items:[ 
  16.         pnSub1, 
  17.         pnSub2 
  18.     ] 
  19. }); 

效果:

可以看出只显示了第一个panle,而且它是自适应的,我们没有设置高度和宽度。

最常用的边框布局(BoardLayout)

Ext.layout.BorderLayout布局把整个布局区域分成东、西、南、北、中5个部分,除了中间区域以外,其他的区域又都是可以省略的,因此我们可以利用它制作出更复杂、更灵活的布局。具体代码如下:

[c-sharp] view plain copy print ?
  1. var viewport2=new Ext.Viewport({ 
  2.     layout:'border'
  3.     items:[{ 
  4.         region:'north',html:'north' 
  5.     },{ 
  6.         region:'south',html:'south' 
  7.     },{ 
  8.         region:'east',html:'east' 
  9.     },{ 
  10.         region:'west',html:'west' 
  11.     },{ 
  12.         region:'center',html:'center' 
  13.     }] 
  14. }); 

效果图如图2所示。

2

图2 使用BorderLayout的布局

注意:center是绝对不能省略的,如果items中缺少了region:'center'就会报错,会造成程序中断。

2.1 设置子区域的大小

我们仅仅需要添加width和height参数,这样就可以指定每个子区域的大小了。但是,north和south两个区域只能指定高度值,宽度值由BorderLayout自动计算;east和west只能指定宽度值,高度值由BorderLayout自动计算;center区域的大小由其他4个部分决定。设置的代码如下所示:

[c-sharp] view plain copy print ?
  1. var viewport2=new Ext.Viewport({ 
  2.                 layout:'border'
  3.                 items:[{ 
  4.                     region:'north',html:'north',height:120 
  5.                 },{ 
  6.                     region:'south',html:'south' 
  7.                 },{ 
  8.                     region:'east',html:'east' 
  9.                 },{ 
  10.                     region:'west',html:'west',width:40 
  11.                 },{ 
  12.                     region:'center',html:'center' 
  13.                 }] 
  14.             }); 

2.2 使用split并限制它的范围

使用split后,我们可以允许用户自动拖放以改变某一个区域的大小,实现的方式只要设置split:true参数即可实现,具体代码如下。

实现效果图如图3所示。

[c-sharp] view plain copy print ?
  1. var viewport=new Ext.Viewport({ 
  2.     layout:'border'
  3.     items:[{ 
  4.         region:'north',                     
  5.         height:40, 
  6.         html:'<h1>薛敬明专栏</h1>' 
  7.     },{ 
  8.         region:'west',                     
  9.         html:'<p>菜单一</p><p>菜单二</p>'
  10.         width:100, 
  11.         split:true 
  12.     },{ 
  13.         region:'center'
  14.         html:'主要内容' 
  15.     }] 
  16. }); 

3

图3 设置split:true后的效果图

2.3 子区域的展开和折叠

该功能可以让一个区域展开和折叠(相当于隐藏),实现的方式只需要配置几个参数即可,具体代码如下,主要配置参数是collapsible:true,这个参数激活了某个区域的折叠功能,而且前面的title参数也是必须设置的。实现代码和效果图如下所示。

[c-sharp] view plain copy print ?
  1. var viewport=new Ext.Viewport({ 
  2.                layout:'border'
  3.                items:[{ 
  4.                    region:'north'
  5.                     
  6.                    height:40, 
  7.                    html:'<h1>薛敬明专栏</h1>' 
  8.                },{ 
  9.                    region:'west',                     
  10.                    html:'<p>菜单一</p><p>菜单二</p>'
  11.                    title:'west'
  12.                    width:100, 
  13.                    //split:true 
  14.                    collapsible:true 
  15.                },{ 
  16.                    region:'center'
  17.                    html:'主要内容' 
  18.                }] 
  19.            }); 

4

图4 带有折叠效果的布局

三、制作伸缩菜单的布局——Accordion

Accordion是EXT中默认布局的一部分,如果想用它,直接将区域加上layout:'accordion'即可,其他部分基本无需改动。我们利用ViewPort制作出只有west和center两个区域的BorderLayout,在west部分放上Accordion,实现方式如下面代码所示。

[c-sharp] view plain copy print ?
  1. var viewport=new Ext.Viewport({ 
  2.                 layout:'border'
  3.                 items:[{ 
  4.                     region:'west'
  5.                     width:200, 
  6.                     layout:'accordion'
  7.                     layoutConfig:{ 
  8.                         titleCollapse:true
  9.                         animate:true
  10.                         activeOnTop:false 
  11.                     }, 
  12.                     items:[{ 
  13.                         title:'第一栏'
  14.                         html:'第一栏' 
  15.                     },{ 
  16.                        title:'第二栏'
  17.                         html:'第二栏'  
  18.                     },{ 
  19.                        title:'第三栏'
  20.                         html:'第三栏'  
  21.                     }] 
  22.                 },{ 
  23.                     region:'center'
  24.                     split:true
  25.                     border:true 
  26.                 }] 
  27.             }); 

效果图如图5所示。

5

图5 使用了Accordion的示例

设置了layout:'accordion'后,再使用items添加3个元素,记得每个子元素里都要加上title参数,accordion没有提供默认的标题,不设置标题是一定会出错的。与布局有关的配置项都写到layoutConfig里

Form布局

这个布局是专门为表单而设计的布局方式,当然多数是用在FormPanel中(它也是FormPanel默认的布局方式)。我们前面说过FormPanel但是没有涉及复杂布局,事实实际应用中更多的是较复杂的布局。

比较一下下面两幅图有什么区别,我想除了标题是没有任何区别的吧,但是事实上这是两种组件,一个是Panel另一个是FormPanel:

[javascript] view plain copy print ?
  1. new Ext.Panel({ 
  2.     renderTo:"divPanel"
  3.     title:"这个是Panel"
  4.     width:300, 
  5.     height:120, 
  6.     bodyStyle:'padding:10'
  7.     layout:"form"
  8.     hideLabels:false
  9.     labelAlighn:"right"
  10.     defaultType:"textfield"
  11.     items:[ 
  12.         {fieldLabel:"姓名",name:"name"}, 
  13.         {fieldLabel:"年龄",name:"age"
  14.     ] 
  15. }); 
  16. new Ext.FormPanel({ 
  17.     renderTo:"divPane2"
  18.     title:"这个是FormPanel"
  19.     width:300, 
  20.     height:120, 
  21.     bodyStyle:'padding:10'
  22.     layout:"form"
  23.     hideLabels:false
  24.     labelAlighn:"right"
  25.     defaultType:"textfield"
  26.     items:[ 
  27.         {fieldLabel:"姓名",name:"name"}, 
  28.         {fieldLabel:"年龄",name:"age"
  29.     ] 
  30. }); 

从代码我们也可看出来,区别就是对于Panel我们配置了layout为form,从这也能看出来说FormPanel默认的布局就是form布局,所以对于习惯于用Panel而不习惯用FormPanel的朋友尽管用Panel,但是一定要考虑好提交的问题,如果使用panel的话,要做提交可是要一个个获得控件的值的,而FromPanel则不需要。

另外一我们需要扩展一下,因为实际的布局要比这复杂。

这个表单虽然不算是太复杂,但是比较有代表性,基本上常用的控件都放上去了,也包含了常见的radio多列布局。好了看代码吧:

[javascript] view plain copy print ?
  1. Ext.onReady(function(){ 
  2.     var pnRow1=new Ext.Panel({ 
  3.         border:false
  4.         layout:'column'
  5.         items:[ 
  6.             new Ext.Panel({ 
  7.                 columnWidth:.5, 
  8.                 layout:'form'
  9.                 border:false
  10.                 labelWidth:40, 
  11.                 labelAlign:'right'
  12.                 items:[ 
  13.                     { 
  14.                         xtype:'textfield'
  15.                         fieldLabel:'姓名'
  16.                         name:'uname'
  17.                         anchor:'95%' 
  18.                     } 
  19.                 ] 
  20.             }), 
  21.             new Ext.Panel({ 
  22.                 columnWidth:.3, 
  23.                 layout:'form'
  24.                 border:false
  25.                 labelWidth:40, 
  26.                 labelAlign:'right'
  27.                 items:[ 
  28.                     { 
  29.                         xtype:'radio'
  30.                         fieldLabel:'性别'
  31.                         boxLabel:'男'
  32.                         name:'sex'
  33.                         inputValue:'男'
  34.                         checked:true
  35.                         anchor:"95%" 
  36.                     } 
  37.                 ] 
  38.             }), 
  39.             new Ext.Panel({ 
  40.                 columnWidth:.2, 
  41.                 layout:'form'
  42.                 border:false
  43.                 labelWidth:1, 
  44.                 items:[ 
  45.                     { 
  46.                         xtype:'radio'
  47.                         boxLabel:'女'
  48.                         name:'sex'
  49.                         inputValue:'女'
  50.                         labelSeparator:''
  51.                         anchor:"95%" 
  52.                     } 
  53.                 ] 
  54.             }) 
  55.         ] 
  56.     }); 
  57.     var pnRow2=new Ext.Panel({ 
  58.         layout:'column'
  59.         border:false
  60.         items:[ 
  61.             new Ext.Panel({ 
  62.                 columnWidth:.5, 
  63.                 layout:'form'
  64.                 border:false
  65.                 labelWidth:40, 
  66.                 labelAlign:'right'
  67.                 items:[ 
  68.                     { 
  69.                         xtype:'datefield'
  70.                         name:'birthday'
  71.                         fieldLabel:'生日'
  72.                         anchor:'95%' 
  73.                     } 
  74.                 ] 
  75.             }), 
  76.             new Ext.Panel({ 
  77.                 columnWidth:.5, 
  78.                 layout:'form'
  79.                 border:false
  80.                 labelWidth:40, 
  81.                 labelAlign:'right'
  82.                 items:[ 
  83.                     { 
  84.                         xtype:'combo'
  85.                         name:'study'
  86.                         store:['专科','本科','硕士','博士'], 
  87.                         fieldLabel:'学历'
  88.                         anchor:'95%' 
  89.                     } 
  90.                 ] 
  91.             }) 
  92.         ] 
  93.     }); 
  94.     var pnRow3=new Ext.Panel({ 
  95.         layout:'column'
  96.         border:false
  97.         items:[ 
  98.             new Ext.Panel({ 
  99.                 columnWidth:.3, 
  100.                 layout:'form'
  101.                 border:false
  102.                 labelWidth:40, 
  103.                 labelAlign:'right'
  104.                 items:[ 
  105.                     { 
  106.                         xtype:'checkbox'
  107.                         name:'hoby'
  108.                         inputValue:'computer'
  109.                         fieldLabel:'爱好'
  110.                         boxLabel:'计算机'
  111.                         anchor:'95%' 
  112.                     } 
  113.                 ] 
  114.             }), 
  115.             new Ext.Panel({ 
  116.                 columnWidth:.3, 
  117.                 layout:'form'
  118.                 border:false
  119.                 labelWidth:1, 
  120.                 labelAlign:'right'
  121.                 items:[ 
  122.                     { 
  123.                         xtype:'checkbox'
  124.                         name:'hoby'
  125.                         inputValue:'football'
  126.                         boxLabel:'足球'
  127.                         labelSeparator:''
  128.                         anchor:'95%' 
  129.                     } 
  130.                 ] 
  131.             }), 
  132.             new Ext.Panel({ 
  133.                 columnWidth:.4, 
  134.                 layout:'form'
  135.                 border:false
  136.                 labelWidth:1, 
  137.                 labelAlign:'right'
  138.                 items:[ 
  139.                     { 
  140.                         xtype:'checkbox'
  141.                         name:'hoby'
  142.                         intputValue:'tinyTable'
  143.                         boxLabel:'乒乓球'
  144.                         labelSeparator:''
  145.                         anchor:'95%' 
  146.                     } 
  147.                 ] 
  148.             }) 
  149.         ] 
  150.     }); 
  151.      
  152.     var pnRow4=new Ext.Panel({ //当然这里直接在FormPanel中添加TextField就可以了,因为只有一行,但是为了一致以及对齐方便我这里还是放到了panel中 
  153.         layout:'form'
  154.         border:false
  155.         labelWidth:40, 
  156.         labelAlign:'right'
  157.         items:[ 
  158.             { 
  159.                 xtype:'textfield'
  160.                 name:'email'
  161.                 fieldLabel:'住址'
  162.                 anchor:'98%' 
  163.             } 
  164.         ] 
  165.     }); 
  166.     var pnRow5=new Ext.Panel({ 
  167.         layout:'form'
  168.         border:false
  169.         labelWidth:40, 
  170.         labelAlign:'right'
  171.         items:[ 
  172.             { 
  173.                 xtype:'htmleditor'
  174.                 name:'note'
  175.                 fieldLabel:'备注'
  176.                 height:200, 
  177.                 anchor:'98%' 
  178.             } 
  179.         ] 
  180.     }); 
  181.      
  182.     new Ext.FormPanel({ 
  183.         renderTo:"divPanel"
  184.         title:"个人信息录入"
  185.         width:600, 
  186.         bodyStyle:'padding:10px'
  187.         layout:"form"
  188.         items:[ 
  189.             pnRow1, 
  190.             pnRow2, 
  191.             pnRow3, 
  192.             pnRow4, 
  193.             pnRow5 
  194.         ] 
  195.     }); 
  196. }); 

 

 

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号