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