ExtJs6学习笔记 -- 自定义 vtype

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

  

• alpha    //字母

• alphanum  //数字，字母，_

• email    //邮箱

• url   //url

二、自定义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();
});