ExtJS表单实践-优快云博客


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
[/code]