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