水平盒布局(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} ] });