Ext常用6大布局方式

前言：

只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局


简单说明最常用到的6种布局方式：

一.最简单的布局：FitLayout

new Ext.Viewport({
 layout:'fit',
 items:[oGrid]  //oGrid是一个表格
});

注意：
1.使用Fit布局 items中只能有一个组件，如果你放置了多个组件，也只能是第一个用效。
2.使用Fit布局在组件中不能使用：autoHeight:true 否则会使FitLayout实效



二.最常用的布局：BorderLayout

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

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

new Ext.Viewport({
	layout:'column',
	itmes:[{
		title:'第一列',
		columnWidth:.3   //30%
	},{
		title:'第二列',
		columnWidht:.3  //30%
	},{
		title:'第三列',
		columnWidth:.4  //40%
	}]
});

注意：
1.items的每个子组件中的columnWidth加起来的和必须为1


五.控制大小布局：AnchorLayout

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

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:{}里面 ；

评论

1 楼 huibyhui 2011-10-30  

哥来帮你看看