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();
});