`
nbkangta
  • 浏览: 435463 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

ExtJs自定义Vtype示例

    博客分类:
  • JS
阅读更多
Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "resources/images/default/s.gif";
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	
	//自定义VTypes类型,验证日期范围
	Ext.apply(Ext.form.VTypes, {
		dateRange: function(val, field){
			if(field.dateRange){
				var beginId = field.dateRange.begin;
				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: '开始日期不能大于结束日期'
	});
	
	var dateForm = new Ext.FormPanel({
		title: '自定义验证',
		labelSeparator: ':',
		labelWidth: 80,
		bodyStyle: 'padding: 5 5 5 5',
		frame: true,
		height: 130,
		width: 300,
		renderTo: Ext.getBody(),
		items: [{
			xtype: 'datefield',
			id: 'beginDate',
			format: 'Y年m月d日',
			width: 150,
			allowBlank: false,
			readOnly: true,
			value: new Date(),
			fieldLabel: '开始日期',
			//用于Vtype类型dateRange
			dateRange: {begin: 'beginDate', end: 'endDate' },
			vtype: 'dateRange'
		},{
			xtype: 'datefield',
			id: 'endDate',
			format: 'Y年m月d日',
			width: 150,
			allowBlank: false,
			readOnly: true,
			value: new Date(),
			fieldLabel: '结束日期',
			//用于Vtype类型dateRange
			dateRange: {begin: 'beginDate', end: 'endDate' },
			vtype: 'dateRange'
		}],
		buttons: [{
			text:'提交',
			handler: function(){
				//先检查表单的基本验证是否完成
				if (dateForm.form.isValid()){
					Ext.Msg.alert('提示','验证通过提交表单');
				}
			}
		}]
	})
})
 
分享到:
评论
1 楼 xa_zbl 2013-09-04  
加了以后,报这个错误:
TypeError: b[this.vtype] is not a function

相关推荐

    extjs表单验证特殊字符

    每个表单字段都可以配置验证规则,通过`vtype`属性定义基本的验证类型,或者使用`validators`属性自定义验证函数。对于特殊字符的验证,我们通常会关心如何限制或排除某些特定字符。 1. **基本验证类型(vtype)**...

    EXT 表单验证EXT 表单验证

    通过阅读如"EXT 表单验证_journeylin_新浪博客.html"、"ExtJS中表单验证使用自定义vtype示例 - 芒果奶茶的日志 - 网易博客.mht"和"Ext表单验证 - 天行健的日志 - 网易博客.mht"这样的资源,你可以深入理解EXT表单...

    extjs总结.pdf

    - 若要创建自定义 `vtype`,需要提供正则表达式、输入掩码和错误消息。 - 示例:创建一个验证导演姓名的 `vtype`,要求由两个以大写字母开头的单词组成,单词间用空格分隔。 - 定义 `nameVal`, `nameMask` 和 `name...

    extjs实践大量实例讲解

    4. **主题定制**:ExtJS 具有强大的主题定制能力,允许开发者自定义界面样式,满足个性化需求。 #### 示例详解 下面我们将通过一系列具体示例来逐步学习 ExtJS 的使用方法: ### 示例 1:创建一个简单的窗口 ```...

    Jquery、YUI、ExtJs 三大javascript框架表单验证带提示功能的demo

    在提供的"demo"压缩包中,你可能会找到三个不同的文件夹,分别对应Jquery、YUI和ExtJs的表单验证示例。这些示例通常会包含HTML文件展示表单结构,CSS文件用于样式控制,以及JavaScript文件实现验证逻辑。你可以通过...

    JS表单验证数字字母汉字邮箱.pdf

    总结来说,这个示例展示了如何利用JavaScript和ExtJS的正则表达式及VType进行表单验证,以确保用户输入的数字、字母、汉字和电子邮件格式正确无误。这对于创建健壮的前端表单和提升用户体验至关重要。在实际开发中,...

    ext form小例子

    在“EXT form小例子”中,我们将探讨EXTJS Form组件的基础用法,包括客户端验证和对`Ext.form.Vtype`的扩展。 1. EXTJS Form组件基础: - 表单创建:EXTJS中的表单通常通过`Ext.create`方法创建,如`Ext.create('...

    ext-3-TextField-sample.rar_ext_ext TextField_ext textfield inp

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。在提供的压缩包中,"ext-3-TextField-sample.rar" 涉及...通过研究提供的示例和文档,你可以更深入地了解如何在ExtJS中有效地利用TextField组件。

Global site tag (gtag.js) - Google Analytics