ExtJS5.1学习笔记5——创建复杂的表单

效果图如下：

下面是代码：

Ext.onReady(function(){
	var form = Ext.create('Ext.form.Panel', {
		title: 'form',
		frame: true,
		width: 500,
		height: 400,
		margin: 20,
		renderTo: 'form',
		collapsible: true,
		autoScroll: true,
		defaultType: 'textfield',
		defaults: {
			anchor: '100%'
		},
		fieldDefaults: {
			labelWidth: 50,
			labelAlign: 'left',
			margin: 5,
			flex: 1
		},
		items: [{
			xtype: 'container',
			layout: 'hbox',
			items: [{
				xtype: 'textfield',
				name: 'name',
				fieldLabel: '姓名',
				allowBlank: false
			}, {
				xtype: 'numberfield',
				name: 'age',
				fieldLabel: '年龄',
				decimalPrecision: 0,
				vtype: 'age',
				maxValue: 120,
				minValue: 0
			}]
		}, {
			xtype: 'container',
			layout: 'hbox',
			items: [{
				xtype: 'textfield',
				name: 'phone',
				fieldLabel: '电话',
				allowBlank: false,
				emptyText: '电话号码或手机号码'
			}, {
				xtype: 'textfield',
				name: 'phone',
				fieldLabel: '邮箱',
				allowBlank: false,
				emptyText: 'Email地址'
			}]
		}, {
			xtype: 'textareafield',
			name: 'remark',
			fieldLabel: '备注',
			height: 50
		}],
		buttons: [{
			text: '保存'
		}]
	});
});