- 浏览: 95297 次
- 性别:
- 来自: 天津
文章分类
最新评论
-
a151555:
不错有用
MyBatise代码自动生成时候Oralce的number类型BigDecimal问题 -
jianwwpro:
不在后台显示错误,只在前台显示400、这怎么办
spring mvc 400错误 -
fatter:
学习了。好贴
JBPM回退功能的实现 -
lostmemorise:
有分支和子流程时估计不行,还有改一些表
JBPM回退功能的实现 -
tree_161219:
不错的思路!学习了
JBPM回退功能的实现
FormPanel这个控件是专门用于表单提交的AJAX控件,这个控件的特殊的地方的是他有一部分是panel控件继承下来。主要是外观方面的属性。而关于表单的功能是从一个叫Ext.form.BasicForm的类获得的。
代码如下
Ext.onReady(function() { Ext.QuickTips.init(); // 这句话让验证信息在控件旁边显示 Ext.form.Field.prototype.msgTarget = 'side'; new Ext.form.FormPanel({ title : "注册用户", layout : "form", id:"userform", width : 400, height : 300, frame : true, labelWidth : 60, waitMsgTarget: true, renderTo : Ext.getBody(), items : [{ xtype : "textfield", fieldLabel : "用户名", allowBlank:false, blankText:"用户名不可以为空!", name : "username" }, { xtype : "textfield", fieldLabel : "密码", name : "password", inputType : "password", allowBlank:false, blankText:"密码不可以为空!", minLength:5, minLengthText:"密码最少为5位" },{ xtype : "textfield", fieldLabel : "电子邮件", allowBlank:false, blankText:"电子邮件不可以为空!", name : "email", vtype:"email" },{ xtype : "textfield", fieldLabel : "电话号码", allowBlank:false, blankText:"电话号码不可以为空!", name : "phone", vtype:"phone" },{ xtype : "textfield", fieldLabel : "价格", allowBlank:false, blankText:"价格不可以为空!", name : "money", vtype:"money" }], buttons : [{ text : "确定", handler : function() { this.disable(); //这是按钮的单击事件它先是取得他的容器也就是panelfrom控件在通过getForm()方法获得表单也就是bascfrom组件,再通过他的submit方法提交 this.ownerCt.getForm().submit({url:"addUser.do",waitMsg:"请等待",success:function(_form,_action){ var _userform = Ext.getCmp("userform"); _userform.buttons[0].enable(); Ext.MessageBox.alert("系统消息","添加成功!"); }}); this.enable(); } }, { text : "取消", handler : function() { this.ownerCt.getForm().reset(); } }] }); });
这里注意
Ext.onReady(function() {
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
new Ext.form.FormPanel({
title : "注册用户",
layout : "form",
id:"userform",
width : 400,
height : 300,
frame : true,
labelWidth : 60,
waitMsgTarget: true,
renderTo : Ext.getBody(),
items : [{
xtype : "textfield",
fieldLabel : "用户名",
allowBlank:false,
blankText:"用户名不可以为空!",
name : "username"
}, {
xtype : "textfield",
fieldLabel : "密码",
name : "password",
inputType : "password",
allowBlank:false,
blankText:"密码不可以为空!",
minLength:5,
minLengthText:"密码最少为5位"
},{
xtype : "textfield",
fieldLabel : "电子邮件",
allowBlank:false,
blankText:"电子邮件不可以为空!",
name : "email",
vtype:"email"
},{
xtype : "textfield",
fieldLabel : "电话号码",
allowBlank:false,
blankText:"电话号码不可以为空!",
name : "phone",
vtype:"phone"
},{
xtype : "textfield",
fieldLabel : "价格",
allowBlank:false,
blankText:"价格不可以为空!",
name : "money",
vtype:"money"
}],
buttons : [{
text : "确定",
handler : function() {
this.disable();
this.ownerCt.getForm().submit({url:"addUser.do",waitMsg:"请等待",success:function(_form,_action){
var _userform = Ext.getCmp("userform");
_userform.buttons[0].enable();
Ext.MessageBox.alert("系统消息","添加成功!");
}});
this.enable();
}
}, {
text : "取消",
handler : function() {
this.ownerCt.getForm().reset();
}
}]
});
});
url属性是提交的目标action
succer属性是后台成功的回调函数。一定注意后台不要有返回值否则会有问题。
第二:
验证部分
EXT为文本框控件自带了一些验证属性
比如
allowBlank:这个属性设置是否可以为空false为不可以为空。
blankText:如果这个文本框为空发出的错误信息。
minLength:文本框的最小长度
minLengthText:文本框的最小长度错误信息
最大长度错误可以看AIP和上面的差不多。
功能做强大的是Vtype属性
EXT为了解决像email验证这类复杂的表单验证提供了一些vtypes见Ext.form.VTypes类
只要在文本框的vtype属性中指定相应的vtypes就可以了但是EXT自带的有限我们可以自己扩展。
方法如下
Ext.apply(Ext.form.VTypes, { //首先定义一个vtype名称,和他的验证函数,val参数是文本框的值,field是文本框。一般我就使用val和正则表达式比较就OK了。 然后定义一个vtype的报错信息,与vtype名称加Text后缀。OK了。 password: function(val, field) { if (field.initialPassField) { var pwd = Ext.getCmp(field.initialPassField); return (val == pwd.getValue()); } return true; }, passwordText: '两次输入的密码不一致!', chinese:function(val,field) { var reg = /^[\u4e00-\u9fa5]+$/i; if(!reg.test(val)) { return false; } return true; }, chineseText:'请输入中文', age:function(val,field) { try { if(parseInt(val) >= 18 && parseInt(val) <= 100) return true; return false; } catch(err) { return false; } }, ageText:'年龄输入有误', alphanum:function(val,field) { try { if(!/\W/.test(val)) return true; return false; } catch(e) { return false; } }, alphanumText:'请输入英文字母或是数字,其它字符是不允许的.', url:function(val,field) { try { if(/^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i.test(val)) return true; return false; } catch(e) { return false; } }, urlText:'请输入有效的URL地址.', max:function(val,field) { try { if(parseFloat(val) <= parseFloat(field.max)) return true; return false; } catch(e) { return false; } }, maxText:'超过最大值', min:function(val,field) { try { if(parseFloat(val) >= parseFloat(field.min)) return true; return false; } catch(e) { return false; } }, minText:'小于最小值', datecn:function(val,field) { try { var regex = /^(\d{4})-(\d{2})-(\d{2})$/; if(!regex.test(val)) return false; var d = new Date(val.replace(regex, '$1/$2/$3')); return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear()); } catch(e) { return false; } }, datecnText:'请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.', integer:function(val,field) { try { if(/^[-+]?[\d]+$/.test(val)) return true; return false; } catch(e) { return false; } }, integerText:'请输入正确的整数', minlength:function(val,field) { try { if(val.length >= parseInt(field.minlen)) return true; return false } catch(e) { return false; } }, minlengthText:'长度过小', maxlength:function(val,field) { try { if(val.length <= parseInt(field.maxlen)) return true; return false; } catch(e) { return false; } }, maxlengthText:'长度过大', ip:function(val,field) { try { if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val))) return true; return false; } catch(e) { return false; } }, ipText:'请输入正确的IP地址', phone:function(val,field) { try { if(/^((0[1-9]{3})?(0[12][0-9])?[-])?\d{6,8}$/.test(val)) return true; return false; } catch(e) { return false; } }, phoneText:'请输入正确的电话号码,如:0920-29392929', mobilephone:function(val,field) { try { if(/(^0?[1][35][0-9]{9}$)/.test(val)) return true; return false; } catch(e) { return false; } }, mobilephoneText:'请输入正确的手机号码', alpha:function(val,field) { try { if( /^[a-zA-Z]+$/.test(val)) return true; return false; } catch(e) { return false; } }, alphaText:'请输入英文字母', money:function(val,field) { try { if(/^\d+\.\d{2}$/.test(val)) return true; return false; } catch(e) { return false; } }, moneyText:'请输入正确的金额' });
网上找了一个验证脚本提供给大家。
发表评论
-
EXT学习笔记10远程数据存储
2008-10-29 22:21 1628远程数据读取 /** * @author wangxiaow ... -
EXT学习笔记09数据存储
2008-10-29 20:24 2860EXT数据存储概念 store:数据存储器 simpleSto ... -
EXT学习笔记07AJAX提交JSON数据又一次的思考
2008-10-26 19:38 3245刚才写的EXT传JSON数据的方法发现一个更好的替代方法。EX ... -
EXT学习笔记07AJAX提交JSON数据
2008-10-26 19:01 3810EXT的AJAX提交特别是提交JSON数据的方式,自己研究了一 ... -
EXT学习笔记06下combox
2008-10-15 22:13 1749combox是EXT.form中最复杂的。<script ... -
EXT学习笔记06datefield和本地化datefield
2008-10-14 21:02 3028现在我们给上次做的表单加上一个datefield控件,这个控件 ... -
EXT笔记06制作添加框
2008-10-13 21:32 2699EXT中除了原有的from布局 ... -
EXT学习笔记4(UI组件window介绍)
2008-10-12 15:58 1982EXT学习时一定要多看EXT中国提供EXT中文API很有帮助。 ... -
Extjs学习笔记03
2008-10-08 22:03 1441第三章:初级UI(1) 第一节:button (1) 构造函 ... -
EXT学习笔记02
2008-10-07 22:24 1325第二章:面向对象性质 1命名空间: Ext.name ... -
EXTJS学习笔记01
2008-10-06 21:46 1313第一章: ext下载下来的目录分类: ext-all.js ... -
JSON-RPC-JAVA首次尝试的经历
2008-10-03 23:19 3857一直在JAVAEYE里混,一直没写过BLOG。最近看一个大哥说 ...
相关推荐
Ext的FormPanel组件说明formPanel的详细使用说明
Ext table布局实例 formpanel的table布局
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别小结,需要的朋友可以参考下。
一个简单的ExtJs4.0搭建环境,利用Ext Ajax的方式提交表单,可使得显示层和控制层完全分开.
Ext教程 展示EXT表单FormPanel和表格GridPanel的使用
Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件
NULL 博文链接:https://627443183-qq-com.iteye.com/blog/1725391
本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
ExtJs中表单formPanel的横向布局
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
.archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc
Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。...
6.3.5 在form中使用Ext.Direct提交数据 187 6.3.6 使用polling方式进行轮询 189 6.4 本章小结 191 第7章 Store 192 7.1 Store的结构 192 7.2 Ext.data.Field 197 7.3 Ext.data.Record 198 7.4 ArrayReader、...
自我扩展FormPanel 和Store实现自动数据触发感知功能实现与store绑定功能
//第一句的目的是为需要的元件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息了。 Ext.form.Field.prototype.msgTarget = ‘under’; //第二句的目的就是设置控件的错误信息显示位置,主要可选的...
FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 Ext.form.BasicForm中的doAction方法来操作的。doAction方法带有两个参数,...
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已