读书人

水准盒布局(HBoxLayout)

发布时间: 2012-11-23 00:03:43 作者: rapoo

水平盒布局(HBoxLayout)

Ext.layout.HBoxLayout扩展自Ext.layout.BoxLayout,其xtype值为hbox。
?
?主要配置项:
????? align:子元素在垂直方向的对齐方式,可选值有top、middle、stretch(垂直伸展)、stretchmax,默认为top。
????? flex:水平伸缩。将面板的宽减去不伸缩的子元素的宽后剩余的宽度等分成【flex和值】份,子元素伸缩后占的份数。默认为0,即不伸缩。
????? pack:子元素在水平方向的包装方式,可选值有start、center、end,默认为start。

?

new Ext.Panel({title: "水平盒布局(HBoxLayout)",width: 500,height: 300,renderTo: "div2",frame: true,layout: "hbox",layoutConfig: {align: "top",defaultMargins: {top: 0,right: 0,bottom: 0,left: 0},pack: "start"},items: [{xtype:"button", text:"按钮1", height:30, flex:1},{xtype:"button", text:"按钮2", height:50, flex:1},{xtype:"button", text:"按钮3", height:70, flex:1},{xtype:"button", text:"按钮4", height:90, flex:3}]});

?
水准盒布局(HBoxLayout)
?

读书人网 >Web前端

热点推荐