Ext随笔(1)-3.0新布局

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>