- 浏览: 897984 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (498)
- J2EE (52)
- 数据库 (17)
- java基础 (43)
- web技术 (19)
- 程序设计 (6)
- 操作系统 (18)
- IT资讯 (7)
- 我的IT生活 (12)
- 学习笔记 (9)
- Jquery (25)
- JavaScript (18)
- spring (40)
- Hibernate (12)
- Struts (10)
- YUI (2)
- Extjs (22)
- .net (0)
- Eclipse (10)
- 社会主义 (2)
- 服务器 (9)
- CSS (8)
- 网络安全 (16)
- 版本控制 (9)
- PHP (2)
- Oracle (42)
- SQL server (1)
- Mysql (11)
- 项目管理 (3)
- 开发工具使用 (10)
- SQL语句 (7)
- Perl (0)
- Shell (6)
- 漏洞 (4)
- ibatis (5)
- hacker (2)
- SQL注入 (6)
- Hacker工具 (2)
- 入侵和渗透 (7)
- 插件/组件 (2)
- 最爱开源 (5)
- 常用软件 (2)
- DOS (1)
- HTML (2)
- Android (9)
- CMS (1)
- portal (8)
- Linux (7)
- OSGI (1)
- Mina (5)
- maven (2)
- hadoop (7)
- twitter storm (2)
- sap hana (0)
- OAuth (0)
- RESTful (1)
- Nginx (4)
- flex (1)
- Dubbo (1)
- redis (1)
- springMVC (1)
- node.js (1)
- solr (2)
- Flume (1)
- MongoDB (2)
- ElasticSearch (1)
最新评论
-
M_drm:
请问要怎么设置浏览器才不报没权限呢?
用JS在页面调用本地可执行文件的方法(ACTIVEX) -
Alexniver:
官方文档。When importing data into I ...
mysql导入数据过慢 解决方法 -
camelwoo:
我记得 Criteria 可以做连接查询与子查询,也可以做分页 ...
Hibernate总结篇二 -
zhenglongfei:
楼主如果SubKeyName 这个节点不存在,怎么办??怎么用 ...
Java操作注册表 -
yxx676229549:
用log4j 2 了
logback
在ExtJS中,使用了四种自定义,分别是'alpha',alphanum,'email','url',分别用来验证表单中的值是否符合字母、字母数字、电子邮件、URL等格式。但在实际应用中,我们需要验证的格式或者规则还是很多的。由于ExtJS是开源的框架,因此,我们可以扩展vtype的功能,实现自定义的vtype。
比如,在实战中,我们经常会遇到需要验证密码的问题,最常使用的,就是如何验证原密码跟重复密码是否一致的问题。为了实现这个功能,我们可以自定义一个vtype,命名为repetition。因此,或以编写扩展代码如下:
Ext.apply方法,用以将新属性复制到原对象中,所以, 新的repetition,我们可以以一个JSON配置对象的形式,复制到Ext.form.VTypes中,借此扩展vtype的功能。注意,除了提供repetition的逻辑之外,你还需要提供一个repetitionText,用以实现当验证失败时,返回的错误信息,该信息会显示在组件的提示信息中。格式必须遵循vtypename + 'Text'的格式,所以,repetition的vtype,其验证失败信息,就是repetitionText。
repetition验证函数也必须遵循一定的参数格式,一共需要提供两个参数,val参数,是宿主表单的的表单值,field是宿主表单自身,所以,我们可以快速地通过这两个参数,访问表单宿主及其表单值,以此来进行验证。
接下来,可以编写实现逻辑如下:
至此,扩展功能已经结束,我们可以在表单中,使用repetition验证了。
运行效果如图:
验证失败时,出现的提示信息,是我们在定义vtype时,所设置的默认值“两个指定组件的组件值不一样”这样的文字,如果需要改成另外的提示信息,可以通过重写repetitionText字段实现。
Ext.form.VTypes.repetitionText = '输入的两次密码不一样';
运行效果如图:
比如,在实战中,我们经常会遇到需要验证密码的问题,最常使用的,就是如何验证原密码跟重复密码是否一致的问题。为了实现这个功能,我们可以自定义一个vtype,命名为repetition。因此,或以编写扩展代码如下:
Ext.apply(Ext.form.VTypes, { repetition: function(val, field) { //代码逻辑在此 }, repetitionText: '两个指定组件的组件值不一样' })
Ext.apply方法,用以将新属性复制到原对象中,所以, 新的repetition,我们可以以一个JSON配置对象的形式,复制到Ext.form.VTypes中,借此扩展vtype的功能。注意,除了提供repetition的逻辑之外,你还需要提供一个repetitionText,用以实现当验证失败时,返回的错误信息,该信息会显示在组件的提示信息中。格式必须遵循vtypename + 'Text'的格式,所以,repetition的vtype,其验证失败信息,就是repetitionText。
repetition验证函数也必须遵循一定的参数格式,一共需要提供两个参数,val参数,是宿主表单的的表单值,field是宿主表单自身,所以,我们可以快速地通过这两个参数,访问表单宿主及其表单值,以此来进行验证。
接下来,可以编写实现逻辑如下:
Ext.apply(Ext.form.VTypes, { repetition: function(val, field) { //返回true,则验证通过,否则验证失败 if (field.repetition) { //如果表单有使用repetition配置,repetition配置是一个JSON对象,该对象提供了一个名为targetCmpId的字段,该字段指定了需要进行比较的另一个组件ID。 var cmp = Ext.getCmp(field.repetition.targetCmpId); //通过targetCmpId的字段查找组件 if (Ext.isEmpty(cmp)) { //如果组件(表单)不存在,提示错误 Ext.MessageBox.show({ title: '错误', msg: '发生异常错误,指定的组件未找到', icon: Ext.Msg.ERROR, buttons: Ext.Msg.OK }); return false; } if (val == cmp.getValue()) { //取得目标组件(表单)的值,与宿主表单的值进行比较。 return true; } else { return false; } } }, repetitionText: '两个指定组件的组件值不一样' })
至此,扩展功能已经结束,我们可以在表单中,使用repetition验证了。
new Ext.form.FieldSet({ title: '注册信息', autoHeight: true, checkboxToggle: true, labelWidth: 55, items: [ new Ext.form.TextField({ fieldLabel: 'Email', vtype: 'email' }), new Ext.form.TextField({ inputType: 'password', id: 'pass1', maxLength: 6, fieldLabel: '输入密码', allowBlank: false }), new Ext.form.TextField({ inputType: 'password', id: 'pass2', maxLength: 6, fieldLabel: '重复密码', allowBlank: false, vtype: 'repetition', //指定repetition验证类型 repetition: { targetCmpId: 'pass1' } //配置repetition验证,提供目标组件(表单)ID }) ] })
运行效果如图:
验证失败时,出现的提示信息,是我们在定义vtype时,所设置的默认值“两个指定组件的组件值不一样”这样的文字,如果需要改成另外的提示信息,可以通过重写repetitionText字段实现。
Ext.form.VTypes.repetitionText = '输入的两次密码不一样';
运行效果如图:
发表评论
-
UI组件:ext、JqueryEasyUI、miniui、dhtmlx及自定义页面
2013-05-16 13:43 3922UI组件:ext、JqueryEasyUI、miniui、dh ... -
JavaScript大牛:Douglas Crockford
2013-03-28 16:02 811JavaScript大牛:Douglas Crockford ... -
详解Ext + Struts2 文件上传
2012-05-18 10:34 3488前阵子项目里面需要实现文件上传的功能,前后换了包括我在内的三个 ... -
Extjs 中的cookie设置
2012-04-25 17:34 2088发现Extjs中有两个cookie 其一:设置cookie如 ... -
ExtJS column布局后labelField无法显示的问题
2012-04-18 10:43 1944第一次用Extjs的column布局时遇见了很多问题,记录下来 ... -
<转>Extjs中的提示信息用法
2012-04-18 09:43 4974ExtJS.form中msgTarget Ext表单提示 ... -
Extjs表单组件及属性
2012-04-18 09:34 1318Ext.form.Action 配置项: ... -
ext2.0 Ext.MessageBox.confirm 值传递
2012-04-11 10:14 1281function showEditPanel(mID){ ... -
ExtJs TreePanel使用TreeLoader在IE下无法正常加载显示的解决方法
2012-03-28 16:12 1790小菜使用如下代码生成T ... -
ExtJS 开发总结
2012-03-17 23:19 909http://nything.iteye.com/blog/4 ... -
Ext Theme Builder /Ext 皮肤定制
2011-12-29 14:52 1759Spket 定制皮肤功能: spket 支持定制EXT皮肤功能 ... -
ExtJS Button的事件和方法定义
2011-12-28 12:24 15251ExtJS Button的事件和方法定义: Ext.onR ... -
IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
2011-12-27 16:30 2870在使用<input id="file_upl& ... -
ExtJS专题-FormPanel(1)
2011-12-14 14:56 1586OK,前面我们已经学过 ... -
ext TreePanel使用
2011-11-25 21:01 17471. 首先还是主要的显示页面tree.html,这里有两个地方 ... -
ExtJS学习笔记 layout的9种样式风格总结
2011-11-15 14:06 962ExtJS学习笔记 layout的9种样式风格总结 http ... -
extjs中TreeLoader加参数
2011-09-14 14:17 5201/** * 重新加载数据 * @param pa ... -
EXT组件xtype简介
2011-01-04 11:56 1027http://wxg6203.iteye.com/blog/6 ... -
Ext之级联Combox
2010-11-21 01:43 1342/** * 定义store,在baseParams中定义参 ... -
图文详解Ext常见开发工具的安装使用
2010-10-11 21:23 1042图文详解Ext常见开发工具的安装使用 http://www. ...
相关推荐
Extjs验证 Extjs验证Extjs验证 Extjs验证Extjs验证 Extjs验证Extjs验证 Extjs验证
extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证
Extjs表单VTYPE扩展,方便验证!
extjs 常用vtype 代码 Ext.VTyps常用vtype大全!
Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
ExtJs自定义消息框,自带的消息框,可以下载来了解一下。
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
自定义高级查询Extjs
ExtJS示例,Grid的使用,Panle的使用,树的使用
xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法
ExtJs中表单formPanel的横向布局
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
一个简单的ExtJs4.0搭建环境,利用Ext Ajax的方式提交表单,可使得显示层和控制层完全分开.
extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习
一个简单的小例子,用ExtJS实现了华丽的注册页面,用Servlet实现向数据库添加注册信息,也就是注册。
NULL 博文链接:https://fxiaozj.iteye.com/blog/1174901
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码
EXTJS 上传组件及示例EXTJS 上传组件及示例EXTJS 上传组件及示例