EXT 中form的列横向排列

EXT的formpanel中的横向排列布局

 利用formpanel的form和column属性混合使用来实现横线布局，效果图如下：

 

 

 

 

var hform = new Ext.form.FormPanel({
	title : "灵活布局的表单",
	width : 650,
	autoHeight : true,
	frame : true,
	renderTo : Ext.getBody(),
	layout : "form", // 整个大的表单是form布局
	labelWidth : 65,
	labelAlign : "right",

	items : [{ // 行1
		layout : "column", // 从左往右的布局
		items : [{
			columnWidth : .3, // 该列有整行中所占百分比
			layout : "form", // 从上往下的布局
			items : [{
				xtype : "textfield",
				fieldLabel : "姓",
				width : 120
			}]
		}, {
			columnWidth : .3,
			layout : "form",
			items : [{
				xtype : "textfield",
				fieldLabel : "名",
				width : 120
			}]
		}, {
			columnWidth : .3,
			layout : "form",
			items : [{
				xtype : "textfield",
				fieldLabel : "英文名",
				width : 120
			}]
		}]
	}, {	// 行2
		layout : "column",
		items : [{
			columnWidth : .46,
			layout : "form",
			items : [{
				xtype : "textfield",
				fieldLabel : "座右铭1",
				width : 200
			}]
		}, {
			columnWidth : .46,
			layout : "form",
			items : [{
				xtype : "textfield",
				fieldLabel : "座右铭2",
				width : 200
			}]
		}]
	}, {// 行3
		layout : "form",
		items : [{
			xtype : "textfield",
			fieldLabel : "奖励",
			width : 500
		}, {
			xtype : "textfield",
			fieldLabel : "处罚",
			width : 500
		}]
	}, {// 行4
		layout : "column",
		items : [{
			layout : "form",
			columnWidth : 0.2,
			items : [{
				xtype : "textfield",
				fieldLabel : "电影最爱",
				width : 50
			}]
		}, {
			layout : "form",
			columnWidth : 0.2,
			items : [{
				xtype : "textfield",
				fieldLabel : "音乐最爱",
				width : 50
			}]
		}, {
			layout : "form",
			columnWidth : 0.2,
			items : [{
				xtype : "textfield",
				fieldLabel : "明星最爱",
				width : 50
			}]
		}, {
			layout : "form",
			columnWidth : 0.2,
			items : [{
				xtype : "textfield",
				fieldLabel : "运动最爱",
				width : 50
			}]
		}]
	}],
	buttonAlign : "center",
	buttons : [{
		text : "提交"
	}, {
		text : "重置"
	}]
});

转载于:https://www.cnblogs.com/sisi-five/p/3994302.html