EXT教程三：ExtPanel的使用

下载文档

ID：37152313

大小：30.23 KB

页数：7页

时间：2019-05-19

收藏

资源描述：

《EXT教程三：ExtPanel的使用》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、本帖最后由Jethro于2011-6-415:47编辑ExtJS4学习笔记(二)---HBox的使用要使用HBox布局方式，首先的熟悉下一下几个主要属性：一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。  1、top（默认）：排列于容器顶端。  2、middle：垂直居中排列于容器中。  3、stretch：垂直排列且拉伸义填补容器高度  4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。三、pack:字符类型，指示组件在容器的位置，有如下几种属性。 

2、 1、start（默认）：组件在容器左边  2、center：组件在容器中间  3、end：组件在容器的右边 实例代码：一、HTML代码：

3、/>

4、>

5、rgins:'0500'},items:[{xtype:'button',text:'Button1'},{xtype:'button',text:'Button2'},{xtype:'button',text:'Button3'},{xtype:'button',text:'Button4'}]}]})d1.render('d1');vard2=Ext.create('Ext.Panel',{title:'HBox垂直对齐，且组件在容器的右边',frame:true,width:600,height:100,items:[{anchor:'100%',layout:{type:'h

6、box',padding:'10',align:'middle',pack:'end'},defaults:{margins:'0500'},items:[{xtype:'button',text:'Button1'},{xtype:'button',text:'Button2'},{xtype:'button',text:'Button3'},{xtype:'button',text:'Button4'}]}]})d2.render('d2');vard3=Ext.create('Ext.Panel',{title:'HBox垂直水平居中，并且所有控件高度为最高控件的高度',fra

7、me:true,width:600,height:100,items:[{anchor:'100%',layout:{type:'hbox',padding:'5',align:'stretchmax',pack:'center'},defaults:{margins:'0500'},items:[{xtype:'button',text:'SmallSize'},{xtype:'button',scale:'medium',text:'MediumSiz