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);