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>
?