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

?

?

?

?

?2012.3.12增加??

??

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?