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

 

 

评论

1 楼 2012jwy 2015-09-17  

引用