ExtJs6学习笔记 -- 自定义 vtype

最新推荐文章于 2021-02-01 19:27:52 发布

weixin_34184158

最新推荐文章于 2021-02-01 19:27:52 发布

阅读量221

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/mercyyang/blog/634081

本文介绍如何在 ExtJS 中使用预定义的验证类型 (VType) 并展示了一个自定义 VType 的实例，该实例用于验证时间格式是否正确，并提供相应的正则表达式、错误提示及输入掩码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1、Vtype 即 validate type ,验证类型。在Ext中有以下几种自带的Vtype：

alpha //字母
alphanum //数字，字母，_
email //邮箱
url //url

2、自定义Vtype

Ext.onReady(function(){
	//自定义Vtype
	Ext.define('Override.form.field.VTypes', {
		override: 'Ext.form.field.VTypes',

		// 此属性为vtype的name，即：vtype：‘time’
		time: function(value) {
			return this.timeRe.test(value);
		},

		/*  一下三个属性的名字必须和是 vtype的 name+Re(Text/Mask)   */
		// vtype的正则验证，必须和次格式一样
		timeRe: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i,
		// vtyp 的错误提示，即和上面定义的格式不一样就报如下错误
		timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
		// vtype 的允许输入的值，如下指:只允许输入数字和amp三个字母，其他无法输入
		timeMask: /[\d\s:amp]/i
	});
	
	Ext.define('grid-Demo',{
		extend:'Ext.window.Window',
		width:500,
		height:300,
		autoShow:true,
		tbar:[{
			xtype:'button',
			text:'delete',
			handler:function(){
				//var gird-demo = Ext.create('gird-demo')
				//alert(Ext.getCmp('selectID').translatePoints(1));
			}
		},{
			xtype:'textfield',
			//使用vtype
			vtype:'time'
		}],
		items:[{
			xtype:'gridpanel',
			id:'selectID',
			columns:column,
			selModel: {
				selType: 'checkboxmodel'
			},
			store:Ext.data.StoreManager.lookup('simpsonsStore'),
			tbar:[{
				xtype:'button',
				text:'Add',
				handler:function(){
					var name ; 
					var grid = this.up('gridpanel');
					var select = grid.getSelectionModel( ).getSelection();
					if(select==0){
						alert('Please Select One Row!');
					}else{
						var  record = select[0];
						alert(record.get('name'))
					}
				}	
			},'->',{
				xtype:'button',
				text:'Close',
				iconCls:'close',
				handler:function(){
					this.up('gridpanel').close();
				}
			}]
			
		}],
		renderTo:Ext.getBody()
	});
	var grid =  Ext.create('grid-Demo');

	grid.show();
});

转载于:https://my.oschina.net/mercyyang/blog/634081