ExtJS : 2 secs with custom vType

category: Ext JS, Javascript

ExtJS : 2 secs with custom vType 0

Dec23

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

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

vType.html

<html>
<head>
	<title>ExtJS - VTypes</title>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
	<script src="../adapter/ext/ext-base.js" type="text/javascript"></script>
	<script src="../ext-all.js" type="text/javascript"></script>

	<script src="js/vtype.js" type="text/javascript"></script>
</head>

<body>
</body>
</html>

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

Happy coding,

Totti