Ext常用6大布局方式
前言：只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局
http://dl.iteye.com/upload/attachment/507247/09f5d37e-b17b-3ca5-a7c9-95489ad67f66.png
简单说明最常用到的6种布局方式：
一.最简单的布局：FitLayout
new Ext.Viewport({ layout:'fit', items://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:{}里面 ；
http://dl.iteye.com/upload/attachment/507251/454746cb-2687-3590-89a1-50abc6f8c7dc.png
页:
[1]