items : [new Ext.form.TextField({
			fieldLabel : "用户名",
			id : "userName",
			minLength : 6,
			minLengthText : "长度不能小于6个字符",
			maxLength : 20,
			maxLengthText : "长度超过了20个字符",
			selectOnFocus : true,
			allowBlank : false,
			blankText : "请填写用户名",
			regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
			regexText : "用户名格式错误"
		}), new Ext.form.TextField({
			inputType : "password",
			fieldLabel : "密码",
			allowBlank : false,
			blankText : "请填写密码",
			minLength : 6,
			minLengthText : "长度不能小于6个字符",
			maxLength : 20,
			maxLengthText : "长度超过了20个字符"
		})]
	})
}
function form2() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = "tip";
	var form = new Ext.form.FormPanel({
		title : "多行文本",
		labelWidth : 60,
		labelSeparator : ": ",
		bodyStyle : "padding:15 5 5 5",
		height : 250,
		width : 250,
		frame : true,
		labelWidth : 60,
		labelAlign : "right",
		applyTo : "form",
		items : [new Ext.form.TextArea({
			fieldLabel : "备注",
			id : "memo",
			width : 150
		}), new Ext.form.Radio({
			name : "sex",
			fieldLabel : "性别",
			boxLabel : "男"
 
		}), new Ext.form.Radio({
			name : "sex",
			fieldLabel : "性别",
			boxLabel : "女"
 
		}), new Ext.form.Checkbox({
			name : "walk",
			fieldLabel : "爱好",
			boxLabel : "散步"
		})],
		buttons : [{
			text : "确定",
			handler : showValue
		}]
	})
	function showValue() {
		var memo = form.findById("memo");
		alert(memo.getValue());
	}
}
 
function form3() {
	var form = new Ext.form.FormPanel({
		title : "练习Trigger",
		labelSeparator : ": ",
		labelWidth : 80,
		bodyStyle : "padding:5 5 5 5",
		frame : true,
		height : 100,
		width : 270,
		applyTo : "form",
		items : [new Ext.form.TriggerField({
			id : "memo",
			fieldLabel : "触发字段",
			hideTrigger : false,
			onTriggerClick : function(e) {
				var memo = form.findById("memo");
				alert(memo.getValue());
			}
		})]
	})
}
 
function form4() {
	var store = new Ext.data.SimpleStore({
		fields : ["province", "post"],
		data : [["南充", "0"], ["成都", "1"], ["广元", "2"], ["乐山", "3"]]
	});
	var form = new Ext.form.FormPanel({
		title : "练习Trigger",
		labelSeparator : ": ",
		labelWidth : 80,
		bodyStyle : "padding:5 5 5 5",
		frame : true,
		height : 100,
		width : 340,
		applyTo : "form",
		items : [new Ext.form.ComboBox({
			id : "post",
			fieldLabel : "四川的城市",
			triggerAction : "all",
			store : store,
			displayField : "province",
			valueField : "post",
			mode : "local",
			forceSelection : true,
			resization : true,
			typeAhead : true,
			value : "3",
			handleHeight : 100
		})]
 
	})
}
 
function form5() {
	var store = new Ext.data.SimpleStore({
		proxy : new Ext.data.HttpProxy({
			url : "/learn/index.jsp"
		}),
		fields : ["bookName"]
	});
	var form = new Ext.form.FormPanel({
		title : "远程数据",
		labelSeparator : ": ",
		labelWidth : 80,
		bodyStyle : "padding:5 5 5 5",
		frame : true,
		height : 100,
		width : 300,
		applyTo : "form",
		items : [new Ext.form.ComboBox({
			id : "book",
			allQuery : "allbook",
			loadingText : "正在加载数据",
			minChars : 3,
			queyDelay : 300,
			queryParam : "searchbook",
			fieldLabel : "书籍列表",
			triggerAction : "all",
			store : store,
			displayField : "bookName",
			mode : "remote"
		})]
	})
}
 
function form6() {
	Ext.apply(Ext.form.VTypes, {
		dateRange : function(val, field) {
			if (field.dateRange) {
				var beginId = field.dateRange.begin;
				/** 根据组件id得到组件 */
				this.beginField = Ext.getCmp(beginId);
				var endId = field.dateRange.end;
				this.endField = Ext.getCmp(endId);
				var beginDate = this.beginField.getValue();
				var endDate = this.endField.getValue();
			}
			if (beginDate < = endDate) {
				return true;
			} else {
				return false;
			}
		},
		dateRangeText : "开始日期不能大于结束日期"
	});
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = "side";
	var dateForm = new Ext.form.FormPanel({
		title : "自定义form",
		labelSeparator : ":",
		labelWidth : 80,
		bodyStyle : "padding:5 5 5 5",
		frame : true,
		height : 130,
		width : 300,
		applyTo : "form",
		items : [new Ext.form.DateField({
			id : "beginDate",
			format : "Y年m月d日",
			width : 150,
			allowBlank : false,
			readOnly : true,
			value : new Date(),
			fieldLabel : "开始日期",
			dateRange : {
				begin : "beginDate",
				end : "endDate"
			},
			vtype : "dateRange"
		}), new Ext.form.DateField({
			id : "endDate",
			format : "Y年m月d日",
			width : 150,
			allowBlank : false,
			readOnly : true,
			value : new Date(),
			fieldLabel : "开始日期",
			dateRange : {
				begin : "beginDate",
				end : "endDate"
			},
			vtype : "dateRange"
		})],
		buttons : [new Ext.Button({
			text : "提交",
			handler : function() {
				if (dateForm.form.isValid()) {
					Ext.Msg.alert("提示", "验证通过提交表单");
				}
			}
		})]
	})
}
 
function form7() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = "side";
	var productForm = new Ext.form.FormPanel({
		title : "表单加载示例",
		labelWidth : 100,
		width : 300,
		frame : true,
		labelSeparator : ": ",
		applyTo : "form",
		items : [new Ext.form.TextField({
			fieldLabel : "产品名称",
			name : "productName",
			width : 150,
			value : "HP5720本本"
		}), new Ext.form.NumberField({
			fieldLabel : "金额",
			name : "price",
			width : 150,
			value : 100
		}), new Ext.form.DateField({
			fieldLabel : "生产日期",
			formate : "Y年m月d日",
			width : 150,
			name : "date",
			value : new Date()
		}), new Ext.form.TextArea({
			id : "introduction",
			name : "introduction",
			fieldLabel : "产品简介",
			width : 150
		})],
		buttons : [new Ext.Button({
			text : "加载简介",
			handler : loadCallBack
		})]
	});
	function loadCallBack() {
		productForm.form.load({
			waitMsg : "正在加载产品简介信息",
			waitTitle : "提示",
			url : "/learn/productServe.jsp",
			method : "POST",
			success : function(form, action) {
				Ext.Msg.alert("提示", "产品加载成功");
			},
			failure : function(form, action) {
				Ext.Msg.alert("提示", "产品简介加载失败
失败原因:" + action.failureType);
			}
		});
	}
}
 
function form8() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = "side";
	var loginForm = new Ext.form.FormPanel({
		title : "登陆",
		labelWidth : 60,
		width : 230,
		frame : true,
		labelSeparator : ":",
		applyTo : "form",
		items : [new Ext.form.TextField({
			fieldLabel : "用户名",
			name : "userName",
			allowBlank : false,
			vtype : "email"
		}), new Ext.form.NumberField({
			fieldLabel : "密码",
			name : "password",
			allowBlank : false
		})],
		buttons : [new Ext.Button({
			text : "登陆",
			handler : login
		}), new Ext.Button({
			text : "重置",
			handler : reset
		})]
	});
	function login() {
		loginForm.form.submit({
			clientValidation : true,
			waitMsg : "正在登录系统请稍后",
			waitTitle : "提示",
			url : "/learn/loginServe.jsp",
			method : "GET",
			success : function(form, action) {
				Ext.Msg.alert("提示", "系统登录成功");
			},
			failure : function(form, action) {
				Ext.Msg.alert("提示", "系统登陆失败" + action.failureType);
			}
		});
	}
	function reset() {
		loginForm.form.reset();
	}
}
 
function form9() {
	var form = new Ext.form.FormPanel({
		labelAlign : 'right',
		labelWidth : 50,
		width : 600,
		title : 'form',
		frame : true,
		items : [{
			layout : 'column',
			items : [{
				columnWidth : .7,
				xtype : 'fieldset',
				checkboxToggle : true,
				title : '单纯输入',
				autoHeight : true,
				defaults : {
					width : 300
				},
				defaultType : 'textfield',
				items : [{
					fieldLabel : '文本',
					name : 'text'
				}, {
					xtype : 'numberfield',
					fieldLabel : '数字',
					name : 'number'
				}, {
					xtype : "combo",
					fieldLabel : '选择',
					name : 'combo',
					store : new Ext.data.SimpleStore({
						fields : ['value', 'text'],
						data : [['value1', 'text1'], ['value2', 'text2']]
					}),
					displayField : 'text',
					valueField : 'value',
					mode : 'local',
					emptyText : '请选择'
				}, {
					xtype : 'datefield',
					fieldLabel : '日期',
					name : 'date'
				}, {
					xtype : 'timefield',
					fieldLabel : '时间',
					name : 'time'
				}, {
					xtype : 'textarea',
					fieldLabel : '多行',
					name : 'textarea'
				}, {
					xtype : 'hidden',
					name : 'hidden'
				}]
			}, {
				columnWidth : .3,
				layout : 'form',
				items : [{
					xtype : 'fieldset',
					checkboxToggle : true,
					title : '多选',
					autoHeight : true,
					defaultType : 'checkbox',
					hideLabels : true,
					style : 'margin-left:10px;',
					bodyStyle : 'margin-left:20px;',
					items : [{
						boxLabel : '首先要穿暖',
						name : 'check',
						value : '1',
						checked : true,
						width : 'auto'
					}, {
						boxLabel : '然后要吃饱',
						name : 'check',
						value : '2',
						checked : true,
						width : 'auto'
					}, {
						boxLabel : '房子遮风避雨',
						name : 'check',
						value : '3',
						width : 'auto'
					}, {
						boxLabel : '行路方便',
						name : 'check',
						value : '4',
						width : 'auto'
					}]
				}, {
					xtype : 'fieldset',
					checkboxToggle : true,
					title : '单选',
					autoHeight : true,
					defaultType : 'radio',
					hideLabels : true,
					style : 'margin-left:10px;',
					bodyStyle : 'margin-left:20px;',
					items : [{
						boxLabel : '渴望自由',
						name : 'rad',
						value : '1',
						checked : true,
						width : 'auto'
					}, {
						boxLabel : '祈求爱情',
						name : 'rad',
						value : '2',
						width : 'auto'
					}]
				}]
			}]
		}, {
			layout : 'form',
			labelAlign : 'top',
			items : [{
				xtype : 'htmleditor',
				fieldLabel : '在线编辑器',
				id : 'editor',
				anchor : '98%'
			}]
		}],
		buttons : [{
			text : '保存'
		}, {
			text : '读取'
		}, {
			text : '取消'
		}]
	});
	form.render("form");
}
 
function form10() {
	var field1 = new Ext.form.Field({
		fieldLabel : 'qtip',
		msgTarget : 'qtip'
	});
	var field2 = new Ext.form.Field({
		fieldLabel : 'title',
		msgTarget : 'title'
	});
	var field3 = new Ext.form.Field({
		fieldLabel : 'side',
		msgTarget : 'side'
	});
	var field4 = new Ext.form.Field({
		fieldLabel : 'under',
		msgTarget : 'under'
	});
 
	var form = new Ext.form.FormPanel({
		title : 'form',
		frame : true,
		applyTo : "form",
		items : [field1, field2, field3, field4],
		renderTo : 'form'
	});
	field1.markInvalid();
	field2.markInvalid();
	field3.markInvalid();
	field4.markInvalid();
};
 
function form11() {
	var grid = new Ext.grid.GridPanel({
		width : 300,
		autoHeight : true,
		title : 'grid',
		store : new Ext.data.SimpleStore({
			data : [['name1', 'female', 'descn1'], ['name2', 'male', 'descn2'],
					['name2', 'male', 'descn2'], ['name2', 'male', 'descn2']],
			fields : ['name', 'sex', 'descn']
		}),
		columns : [{
			header : '姓名',
			dataIndex : 'name'
		}, {
			header : '性别',
			dataIndex : 'sex'
		}, {
			header : '备注',
			dataIndex : 'descn'
		}],
		viewConfig : {
			forceFit : true
		}
	});
 
	var selectMenu = new Ext.menu.Menu({
		items : [grid]
	});
 
	var field = new Ext.form.TriggerField({
		fieldLabel : '选择',
		name : 'name',
		onSelect : function(record) {
		},
		onTriggerClick : function() {
			if (this.menu == null) {
				this.menu = selectMenu;
			}
			this.menu.show(this.el, "tl-bl?");
		}
	});
 
	grid.on('rowclick', function(grid, rowIndex, e) {
		selectMenu.hide();
		field.setValue(rowIndex);
	});
 
	var form = new Ext.form.FormPanel({
		title : 'form',
		frame : true,
		items : [field],
		renderTo : 'form'
	});
}