欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ext随笔(1)-3.0新布局

程序员文章站 2022-07-13 15:19:04
...

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>