function form1() {
Ext.BLANK_IMAGE_URL = "/learn/ext/resources/images/default/s.gif";
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个字符"
})]
})
}
function form2() {
Ext.BLANK_IMAGE_URL = "/learn/ext/resources/images/default/s.gif";
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 : 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 triggerField() {
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 : 270,
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 : 270,
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("提示", "产品简介加载失败<br/>失败原因:" + 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();
}
}
Ext.onReady(form8);