Ext常用的布局都在Ext.layout下，这里几乎涵盖了所有的布局方式，满足开发者需求。那么我们就其中常用的方式逐一介绍。
Border布局
Border布局是Ext中常用布局方式（经常用到整个页面的总体布局），感觉用的几率很大。在看代码之前先熟悉一种特殊的容器ViewPort，它是对于浏览器视窗的抽象，你可以将它理解为浏览器的可见区域，它将渲染到document.body并自动调整大小，一个页面只能创建一个Viewport。
var pnNorth=new Ext.Panel({
id:‘pnNorth‘,
autoWidth:true,
heigth:80,
frame:true,
region:‘north‘,
html:‘这里放置页头内容‘
});
var pnWest=new Ext.Panel({
id:‘pnWest‘,
title:‘菜单项‘,
width:200,
heigth:‘auto‘,
split:true,//显示分隔条
region:‘west‘,
collapsible:true
});
var pnCenter=new Ext.TabPanel({
region:‘center‘,
activeTab:0,
items:[
{
title:‘收件箱‘,
authHeight:true,
closable:true,//是否可关闭
html:‘这里显示所收邮件。。。‘
}
]
});
var vp=new Ext.Viewport({
layout:"border",
items:[
pnNorth,
pnWest,
pnCenter
]
});
Column布局
从字面就知道Column布局就是列布局，例如我一个panel中还有两个子panel现在想要左侧显示一个右侧显示一个怎么办？这是可以选择Column将父Panel分为两列，左侧一个右侧一个。
var pnSub1=new Ext.Panel({
height:300,
columnWidth:.3,
html:‘这是子panle1‘
});
var pnSub2=new Ext.Panel({
height:300,
columnWidth:.7,
html:‘这是子panle2‘
});
var pn=new Ext.Panel({
id:‘pn‘,
title:‘父Panel‘,
renderTo:‘divPanel‘,
width:800,
height:300,
layout:‘column‘,
items:[
pnSub1,
pnSub2
]
});
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
]
});
Table布局
Table布局多数用在较为复杂的情况下，想一想做web开发总不能就上面几种简单情况吧，因此也就是说Table布局还是很常用的。当然，但是和其他布局相比其参数设置也稍微一些（不用怕，事实上还是很少的）。
new Ext.Panel({
title:"父Panel",
renderTo:"divPanel",
width:900,
height:200,
layout:"table",
layoutConfig:{
columns:3
},
defaults:{
height:100,
width:300
},
items:[
{
html:"第一个子panel(行：1,列：1)",
rowspan:2,//合并行
height:200
},
{
html:"第二个子panel(行：1,列：2)",
colspan:2,//合并列
width:600
},
{
html:"第三个子panel(行：2,列：1)"
},
{
html:"第四个子panel(行：2,列：2)"
}
]
});
Form布局
这个布局是专门为表单而设计的布局方式，当然多数是用在FormPanel中（它也是FormPanel默认的布局方式）。我们前面说过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则不需要。
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
]
});
});
时间： 2024-10-09 15:17:30