前言：
只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局
简单说明最常用到的6种布局方式：
一.最简单的布局：FitLayout
Javascript代码
new Ext.Viewport({
layout:'fit',
items:[oGrid] //oGrid是一个表格
});
注意：
1.使用Fit布局 items中只能有一个组件，如果你放置了多个组件，也只能是第一个用效。
2.使用Fit布局在组件中不能使用：autoHeight:true 否则会使FitLayout实效
二.最常用的布局：BorderLayout
Javascript代码
new Ext.Viewport({
layout:'border',
items:[
{region:'north',height:100},
{region:'south',height:100},
{region:'west',width:200},
{region:'east',width:200},
{region:'center'}
]
});
注意：
1.center属性值必须指定
2.north,south 不要指定width
3.west,east不要指定height
4.不要使用autoHeight，autoWidth
5.添加split:true属性可以控制区域大小
三.表单布局：FormLayout
Javascript代码
new Ext.form.FormPanel({
layout:'form', //默认是FormLayout布局（可写可不写）
items:[{
xtype:'textfield'
fieldLabel:'名称',
name:'name',
anchor:'90%'
},{
xtype:'datefield',
fieldLabel:'生日',
name:'birthday',
anchor:'90%'
},{
xtype:'textfield',
fieldLabel:'性别',
name:'sex',
anchor:'90%'
}]
});
注意：
1.从上面的继承图可以看出FormLayout是AnchorLayout的子类，因此可以在里面使用anchor属性设置大小比例
2.FormLayout是FormPanel默认的布局方式，因此可以不显示写出Layout:'form'
3.fieldLabel，boxLabel在FormLayout布局情况下才能显示出来
四.列布局：ColumnLayout
Javascript代码
new Ext.Viewport({
layout:'column',
itmes:[{
title:'第一列',
columnWidth:.3 //30%
},{
title:'第二列',
columnWidht:.3 //30%
},{
title:'第三列',
columnWidth:.4 //40%
}]
});
注意：
1.items的每个子组件中的columnWidth加起来的和必须为1
五.控制大小布局：AnchorLayout
Javas代码
new Ext.Viewport({
layout:'anchor',
itmes:[{
title:'one',
anchor:'50% 60%'//表示所占宽度，高度的百分比
},{
title:'two',
anchor:'40%' //表示所占宽度，高度百分比都是40%
},{
title:'three',
anchor:'-20 -100' //表示距离右侧的20px,距离底部100px
},{
title:'four',
anchor:'-300' //表示距离右侧，底部都为300px
}]
});
六.伸缩折叠布局：Accordion
Javascript代码
new Ext.Viewport({
layout:'border',
items:[{
region:'west',
width:200,
layout:'accordion', //伸缩折叠布局
layoutConfig:{
titleCollapse:true, //单击标题可以折叠
animate:true, //展开折叠时的动画效果
activeOnTop:true,//展开的子面板的顺序总在最上面
},
items:[{
title:'第一栏',
html:'one'
},{
title:'第二栏',
html:'two'
},{
title:'第三栏',
html:'three'
},{
title:'第四栏',
html:'four'
}]
},{
region:'center',
split:true,
border:true
}]
});
注意：
1.使用Accordion布局一定要设置标题：title
2.与布局有关(所有布局方式都可以)的参数属性都可以写在layoutConfig:{}里面 ；
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
