[color=red][size=medium]前言:[/size][/color]
只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局
[img]http://dl.iteye.com/upload/attachment/507247/09f5d37e-b17b-3ca5-a7c9-95489ad67f66.png[/img]
简单说明最常用到的6种布局方式:
[color=red][size=medium]一.最简单的布局:FitLayout[/size][/color]
[color=green]注意:
1.使用Fit布局 items中只能有一个组件,如果你放置了多个组件,也只能是第一个用效。
2.使用Fit布局在组件中不能使用:autoHeight:true 否则会使FitLayout实效
[/color]
[color=red][size=medium]二.最常用的布局:BorderLayout[/size][/color]
[color=green]注意:
1.center属性值必须指定
2.north,south 不要指定width
3.west,east不要指定height
4.不要使用autoHeight,autoWidth
5.添加split:true属性可以控制区域大小
[/color]
[color=red][size=medium]三.表单布局:FormLayout[/size][/color]
[color=green]注意:
1.从上面的继承图可以看出FormLayout是AnchorLayout的子类,因此可以在里面使用anchor属性设置大小比例
2.FormLayout是FormPanel默认的布局方式,因此可以不显示写出Layout:'form'
3.fieldLabel,boxLabel在FormLayout布局情况下才能显示出来
[/color]
[color=red][size=medium]四.列布局:ColumnLayout[/size][/color]
[color=green]注意:
1.items的每个子组件中的columnWidth加起来的和必须为1[/color]
[color=red][size=medium]五.控制大小布局:AnchorLayout[/size][/color]
[color=red][size=medium]六.伸缩折叠布局:Accordion[/size][/color]
[color=green]注意:
1.使用Accordion布局一定要设置标题:title
2.与布局有关(所有布局方式都可以)的参数属性都可以写在layoutConfig:{}里面 ;
[/color]
[img]http://dl.iteye.com/upload/attachment/507251/454746cb-2687-3590-89a1-50abc6f8c7dc.png[/img]
只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局
[img]http://dl.iteye.com/upload/attachment/507247/09f5d37e-b17b-3ca5-a7c9-95489ad67f66.png[/img]
简单说明最常用到的6种布局方式:
[color=red][size=medium]一.最简单的布局:FitLayout[/size][/color]
new Ext.Viewport({
layout:'fit',
items:[oGrid] //oGrid是一个表格
});
[color=green]注意:
1.使用Fit布局 items中只能有一个组件,如果你放置了多个组件,也只能是第一个用效。
2.使用Fit布局在组件中不能使用:autoHeight:true 否则会使FitLayout实效
[/color]
[color=red][size=medium]二.最常用的布局:BorderLayout[/size][/color]
new Ext.Viewport({
layout:'border',
items:[
{region:'north',height:100},
{region:'south',height:100},
{region:'west',width:200},
{region:'east',width:200},
{region:'center'}
]
});
[color=green]注意:
1.center属性值必须指定
2.north,south 不要指定width
3.west,east不要指定height
4.不要使用autoHeight,autoWidth
5.添加split:true属性可以控制区域大小
[/color]
[color=red][size=medium]三.表单布局:FormLayout[/size][/color]
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%'
}]
});
[color=green]注意:
1.从上面的继承图可以看出FormLayout是AnchorLayout的子类,因此可以在里面使用anchor属性设置大小比例
2.FormLayout是FormPanel默认的布局方式,因此可以不显示写出Layout:'form'
3.fieldLabel,boxLabel在FormLayout布局情况下才能显示出来
[/color]
[color=red][size=medium]四.列布局:ColumnLayout[/size][/color]
new Ext.Viewport({
layout:'column',
itmes:[{
title:'第一列',
columnWidth:.3 //30%
},{
title:'第二列',
columnWidht:.3 //30%
},{
title:'第三列',
columnWidth:.4 //40%
}]
});
[color=green]注意:
1.items的每个子组件中的columnWidth加起来的和必须为1[/color]
[color=red][size=medium]五.控制大小布局:AnchorLayout[/size][/color]
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
}]
});
[color=red][size=medium]六.伸缩折叠布局:Accordion[/size][/color]
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
}]
});
[color=green]注意:
1.使用Accordion布局一定要设置标题:title
2.与布局有关(所有布局方式都可以)的参数属性都可以写在layoutConfig:{}里面 ;
[/color]
[img]http://dl.iteye.com/upload/attachment/507251/454746cb-2687-3590-89a1-50abc6f8c7dc.png[/img]