Ext form实例

Ext.BLANK_IMAGE_URL = "../js/extjs/resources/images/default/s.gif";
Ext.onReady(form11);
function form1() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = "side";
	var form = new Ext.form.FormPanel({
		title : "用户登陆",
		labelWidth : 60,
		labelSeparator : ": ",
		bodyStyle : "padding:15 5 5 5",
		height : 120,
		width : 250,
		frame : true,
		labelWidth : 60,
		labelAlign : "right",
		applyTo : "form",
		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个字符"
		})]
	})
}
[code="javascript"]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 : 'marg