(Ext 基础篇) 布局
所谓布局,简单来说就是决定把什么东西放到什么位置上,对于管理软件来说,一般都是首部放标题,左边放菜单栏,空余的右下方用来显示具体的内容。本章将详细介绍EXT中布局的用法。
一、传统的布局方式
我们可以用Ext.Viewport类对整个页面进行整体布局,具体使用方法如下:
- var viewport=new Ext.Viewport({
- layout:'border',
- items:[{
- region:'north',
- height:40,
- html:'<h1>薛敬明专栏</h1>'
- },{
- region:'west',
- width:100,
- html:'<p>菜单一</p><p>菜单二</p>'
- },{
- region:'center',
- html:'主要内容'
- }]
- });
相关属性:
layout:布局样式(border布局)
items:包含其他组件
region:组件位置
效果图如图1所示:
Fit布局
如果从复杂度来说fit布局应该算是最简单的了,设置是最少的。Fit布局同样也是设置父容器的layout属性,但是子容器不用设置任何相应属性。它的目的就是为了让子容器能够自适应于父容器(用了fit布局子容器设置宽度无效),但是请注意如果父容器有多个子容器,只会显示第一个。
- var pnSub1=new Ext.Panel({
- title:"子panel1",
- html:"子panel1(会显示)"
- });
- var pnSub2=new Ext.Panel({
- title:"子panel2",
- html:"子panel2(不会显示)"
- });
- var pn=new Ext.Panel({
- renderTo:"divPanel",
- title:"父panel",
- width:800,
- height:200,
- layout:"fit",
- items:[
- pnSub1,
- pnSub2
- ]
- });
效果:
可以看出只显示了第一个panle,而且它是自适应的,我们没有设置高度和宽度。
最常用的边框布局(BoardLayout)
Ext.layout.BorderLayout布局把整个布局区域分成东、西、南、北、中5个部分,除了中间区域以外,其他的区域又都是可以省略的,因此我们可以利用它制作出更复杂、更灵活的布局。具体代码如下:
- var viewport2=new Ext.Viewport({
- layout:'border',
- items:[{
- region:'north',html:'north'
- },{
- region:'south',html:'south'
- },{
- region:'east',html:'east'
- },{
- region:'west',html:'west'
- },{
- region:'center',html:'center'
- }]
- });
效果图如图2所示。
图2 使用BorderLayout的布局
注意:center是绝对不能省略的,如果items中缺少了region:'center'就会报错,会造成程序中断。
2.1 设置子区域的大小
我们仅仅需要添加width和height参数,这样就可以指定每个子区域的大小了。但是,north和south两个区域只能指定高度值,宽度值由BorderLayout自动计算;east和west只能指定宽度值,高度值由BorderLayout自动计算;center区域的大小由其他4个部分决定。设置的代码如下所示:
- var viewport2=new Ext.Viewport({
- layout:'border',
- items:[{
- region:'north',html:'north',height:120
- },{
- region:'south',html:'south'
- },{
- region:'east',html:'east'
- },{
- region:'west',html:'west',width:40
- },{
- region:'center',html:'center'
- }]
- });
2.2 使用split并限制它的范围
使用split后,我们可以允许用户自动拖放以改变某一个区域的大小,实现的方式只要设置split:true参数即可实现,具体代码如下。
实现效果图如图3所示。
- var viewport=new Ext.Viewport({
- layout:'border',
- items:[{
- region:'north',
- height:40,
- html:'<h1>薛敬明专栏</h1>'
- },{
- region:'west',
- html:'<p>菜单一</p><p>菜单二</p>',
- width:100,
- split:true
- },{
- region:'center',
- html:'主要内容'
- }]
- });
图3 设置split:true后的效果图
2.3 子区域的展开和折叠
该功能可以让一个区域展开和折叠(相当于隐藏),实现的方式只需要配置几个参数即可,具体代码如下,主要配置参数是collapsible:true,这个参数激活了某个区域的折叠功能,而且前面的title参数也是必须设置的。实现代码和效果图如下所示。
- var viewport=new Ext.Viewport({
- layout:'border',
- items:[{
- region:'north',
- height:40,
- html:'<h1>薛敬明专栏</h1>'
- },{
- region:'west',
- html:'<p>菜单一</p><p>菜单二</p>',
- title:'west',
- width:100,
- //split:true
- collapsible:true
- },{
- region:'center',
- html:'主要内容'
- }]
- });
图4 带有折叠效果的布局
三、制作伸缩菜单的布局——Accordion
Accordion是EXT中默认布局的一部分,如果想用它,直接将区域加上layout:'accordion'即可,其他部分基本无需改动。我们利用ViewPort制作出只有west和center两个区域的BorderLayout,在west部分放上Accordion,实现方式如下面代码所示。
- var viewport=new Ext.Viewport({
- layout:'border',
- items:[{
- region:'west',
- width:200,
- layout:'accordion',
- layoutConfig:{
- titleCollapse:true,
- animate:true,
- activeOnTop:false
- },
- items:[{
- title:'第一栏',
- html:'第一栏'
- },{
- title:'第二栏',
- html:'第二栏'
- },{
- title:'第三栏',
- html:'第三栏'
- }]
- },{
- region:'center',
- split:true,
- border:true
- }]
- });
效果图如图5所示。
图5 使用了Accordion的示例
设置了layout:'accordion'后,再使用items添加3个元素,记得每个子元素里都要加上title参数,accordion没有提供默认的标题,不设置标题是一定会出错的。与布局有关的配置项都写到layoutConfig里
Form布局
这个布局是专门为表单而设计的布局方式,当然多数是用在FormPanel中(它也是FormPanel默认的布局方式)。我们前面说过FormPanel但是没有涉及复杂布局,事实实际应用中更多的是较复杂的布局。
比较一下下面两幅图有什么区别,我想除了标题是没有任何区别的吧,但是事实上这是两种组件,一个是Panel另一个是FormPanel:
- new Ext.Panel({
- renderTo:"divPanel",
- title:"这个是Panel",
- width:300,
- height:120,
- bodyStyle:'padding:10',
- layout:"form",
- hideLabels:false,
- labelAlighn:"right",
- defaultType:"textfield",
- items:[
- {fieldLabel:"姓名",name:"name"},
- {fieldLabel:"年龄",name:"age"}
- ]
- });
- new Ext.FormPanel({
- renderTo:"divPane2",
- title:"这个是FormPanel",
- width:300,
- height:120,
- bodyStyle:'padding:10',
- layout:"form",
- hideLabels:false,
- labelAlighn:"right",
- defaultType:"textfield",
- items:[
- {fieldLabel:"姓名",name:"name"},
- {fieldLabel:"年龄",name:"age"}
- ]
- });
从代码我们也可看出来,区别就是对于Panel我们配置了layout为form,从这也能看出来说FormPanel默认的布局就是form布局,所以对于习惯于用Panel而不习惯用FormPanel的朋友尽管用Panel,但是一定要考虑好提交的问题,如果使用panel的话,要做提交可是要一个个获得控件的值的,而FromPanel则不需要。
另外一我们需要扩展一下,因为实际的布局要比这复杂。
这个表单虽然不算是太复杂,但是比较有代表性,基本上常用的控件都放上去了,也包含了常见的radio多列布局。好了看代码吧:
- Ext.onReady(function(){
- var pnRow1=new Ext.Panel({
- border:false,
- layout:'column',
- items:[
- new Ext.Panel({
- columnWidth:.5,
- layout:'form',
- border:false,
- labelWidth:40,
- labelAlign:'right',
- items:[
- {
- xtype:'textfield',
- fieldLabel:'姓名',
- name:'uname',
- anchor:'95%'
- }
- ]
- }),
- new Ext.Panel({
- columnWidth:.3,
- layout:'form',
- border:false,
- labelWidth:40,
- labelAlign:'right',
- items:[
- {
- xtype:'radio',
- fieldLabel:'性别',
- boxLabel:'男',
- name:'sex',
- inputValue:'男',
- checked:true,
- anchor:"95%"
- }
- ]
- }),
- new Ext.Panel({
- columnWidth:.2,
- layout:'form',
- border:false,
- labelWidth:1,
- items:[
- {
- xtype:'radio',
- boxLabel:'女',
- name:'sex',
- inputValue:'女',
- labelSeparator:'',
- anchor:"95%"
- }
- ]
- })
- ]
- });
- var pnRow2=new Ext.Panel({
- layout:'column',
- border:false,
- items:[
- new Ext.Panel({
- columnWidth:.5,
- layout:'form',
- border:false,
- labelWidth:40,
- labelAlign:'right',
- items:[
- {
- xtype:'datefield',
- name:'birthday',
- fieldLabel:'生日',
- anchor:'95%'
- }
- ]
- }),
- new Ext.Panel({
- columnWidth:.5,
- layout:'form',
- border:false,
- labelWidth:40,
- labelAlign:'right',
- items:[
- {
- xtype:'combo',
- name:'study',
- store:['专科','本科','硕士','博士'],
- fieldLabel:'学历',
- anchor:'95%'
- }
- ]
- })
- ]
- });
- var pnRow3=new Ext.Panel({
- layout:'column',
- border:false,
- items:[
- new Ext.Panel({
- columnWidth:.3,
- layout:'form',
- border:false,
- labelWidth:40,
- labelAlign:'right',
- items:[
- {
- xtype:'checkbox',
- name:'hoby',
- inputValue:'computer',
- fieldLabel:'爱好',
- boxLabel:'计算机',
- anchor:'95%'
- }
- ]
- }),
- new Ext.Panel({
- columnWidth:.3,
- layout:'form',
- border:false,
- labelWidth:1,
- labelAlign:'right',
- items:[
- {
- xtype:'checkbox',
- name:'hoby',
- inputValue:'football',
- boxLabel:'足球',
- labelSeparator:'',
- anchor:'95%'
- }
- ]
- }),
- new Ext.Panel({
- columnWidth:.4,
- layout:'form',
- border:false,
- labelWidth:1,
- labelAlign:'right',
- items:[
- {
- xtype:'checkbox',
- name:'hoby',
- intputValue:'tinyTable',
- boxLabel:'乒乓球',
- labelSeparator:'',
- anchor:'95%'
- }
- ]
- })
- ]
- });
- var pnRow4=new Ext.Panel({ //当然这里直接在FormPanel中添加TextField就可以了,因为只有一行,但是为了一致以及对齐方便我这里还是放到了panel中
- layout:'form',
- border:false,
- labelWidth:40,
- labelAlign:'right',
- items:[
- {
- xtype:'textfield',
- name:'email',
- fieldLabel:'住址',
- anchor:'98%'
- }
- ]
- });
- var pnRow5=new Ext.Panel({
- layout:'form',
- border:false,
- labelWidth:40,
- labelAlign:'right',
- items:[
- {
- xtype:'htmleditor',
- name:'note',
- fieldLabel:'备注',
- height:200,
- anchor:'98%'
- }
- ]
- });
- new Ext.FormPanel({
- renderTo:"divPanel",
- title:"个人信息录入",
- width:600,
- bodyStyle:'padding:10px',
- layout:"form",
- items:[
- pnRow1,
- pnRow2,
- pnRow3,
- pnRow4,
- pnRow5
- ]
- });
- });
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。