Ext随笔(1)-3.0新布局
在ext2.x的时候对于页面的布局虽然已经很丰富了。但对于细节上的布局还是不够完美。如在一个表单中,既要有行也要有列的时候,布局很麻烦。在ext3.x中发现对于这方面进行了改进。所以找了些资料学习了一番。在此分享给大家。
在ext3.x中新添加了HboxLayout布局和VboxLayout。看字面上的意思,大家就可以猜的出来。HboxLayout是进行列布局的,VboxLayout是进行布局的。查看官方的API,大部分的配置项都很简单,一看就知道其意思。其中配置项align需要研究研究。有4个可选择的值:
top:默认值,子元素垂直排列在容器的左边。
middle:子元素垂直排列在容器中间。
stretch:子元素的高度将拉伸到与容器一样。
stretchmax: 子元素的高度将拉伸到最大的子元素高度。
还有一个配置项pack从字面上没有领会其真正的含义。研究得知是控制子元素的放置方式。3个可选择的值:
start:默认值,子元素将放置到容器的左边。
center: 子元素将放置到容器的中间。
end: 子元素将放置到容器的右边。
最后尝试做了个Demo.代码如下:
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL="ext/resources/images/default/s.gif";
Ext.QuickTips.init();
var _from=new Ext.form.FormPanel({
title:'布局',
renderTo:'hbox',
width:600,
height:400,
frame:true,
layout:{ //设置布局是垂直布局,子元素的高度将与容器一样。
type:'hbox',
align:'stretch',
padding:5
},
items:[{
flex:2, //占FormPanel的2/3,其中还包含一个水平布局
layout:{
type:'vbox',
align:'stretch',
defaultMargins:{
top:0,
right:5,
bottom:5,
left:5
}
},
items:[{
flex:1,
layout:'fit',
items:[{xtype:'fieldset',title:'分组1',items:[]}]
},{
flex:1,
layout:'fit',
items:[{xtype:'fieldset',title:'分组2',items:[]}]
}
]
},{
flex:1,
layout:'fit',
items:[{xtype:'fieldset',title:'分组3',items:[]}]
}
]
});
});
</script>
<div id="hbox"></div>