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,                                   //FormPanel2/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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值