ExtJS : 2 secs with custom vType

admin — Tue, 22 Dec 2009 17:54:59 +0000

Following another question on ExtJS forum, I’ve created a sample of how to use vType for ExtJS newbies.

Basically, in form submission you need to validate user input and / or prevent user from entering invalid keys. Pure Javascript implementation could be quite a headache to some folks. ExtJS now provides a regex-based validation class called, vType, which helps you to do both things mentioned above.

Demo: a simple Custom vType

You can find more examples at ExtJS 3.1 API: vType

vType.js

Ext.onReady(function(){
	// QuickTips to display error messages next to form fields
	Ext.QuickTips.init();

	// Declare a custom VType
	Ext.apply(Ext.form.VTypes, {
                 // This function validates input text
		AlphaNum:  function(v) {
			return /^[a-z0-9]$/i.test(v);
		},
                // This is the tooltip message displayed when invalid input occurs
		AlphaNumText: 'Must be an alphanumeric word',
                // This mask filter invalid keystrokes
		AlphaNumMask: /[a-z0-9]/i
	});

	// Simple form with a text field for demo purpose
	var myForm = new Ext.FormPanel({
		width: 300,
		renderTo: Ext.getBody(),
		title: '2 secs with vType Demo',
		items: [
			{
				xtype: 'textfield',
				id: 'alphanum',
				fieldLabel: 'AlphaNum',
				vtype: 'AlphaNum'
			}
		],
		buttons: [
			{
				text: 'Submit',
				handler: function() {
					// myForm.getForm().submit();
					Ext.Msg.alert('Action', 'Form submitted');
				}
			}, {
				text: 'Reset',
				handler: function() {
					myForm.getForm().reset();
				}
			}
		]
	});
});

vType.html



	ExtJS - VTypes

You need to know a little bit of javascript regular expression in order to configure vType as you want.

Happy coding,

Totti

Totti's Blog » vType

ExtJS : 2 secs with custom vType