ExtJS includes form components that allow you to quickly and easily create fully functional and validated forms. In this example, we show how to create a login/registration form with the following features in minutes using the Ext Js Javascript Web Framework, which will greatly assist you in developing HTML5 applications.
- Adding textfield, numberfield, datefield
- Adding form validation (email, password…)
- Displaying form error messages
- Resetting values
- Processing form values
Table of Contents
Login Form
A simple example demonstrating how to create a login form.
Step 1: Create form configuration
{ xtype: 'formpanel', title: 'Form login example', bodyPadding: 20, width: 500, bbar: ['->',{ text: 'Login', handler: 'onLogin' }], items: [{ xtype: 'textfield', label: 'User ID', name: 'user', placeholder: 'user id', }, { xtype: 'passwordfield', label: 'Password', name: 'pass', placeholder: 'password' }, { xtype: 'checkbox', boxLabel: 'Remember me', name: 'remember' }] }
Step 2: Add form validation
//Required field allowBlank: false, required: true, //Custom validator validators: function (value) { return /^[a-zA-Z]{8,}$/.test(value) ? true : 'Your password must contain at least 8 characters'; }
Step 3: Display error messages
errorTip: { anchor: true, align: 'l-r?' }, errorTarget: 'under'
Sencha Fiddle:
Registration Form
A simple example of a registration form with field mask, email validation or selectfield.
Step 1: Email validation
{ xtype: 'emailfield', label: 'Email', name: 'email', allowBlank: false, required: true, //Email validation validators: 'email', errorTip: { anchor: true, align: 'l-r?' }, errorTarget: 'under' }
Step 2: Field Mask
{ //Field mask label: 'Phone Number', name: 'phone', inputType: 'tel', autoComplete: true, autoHideInputMask: false, inputMask: '(999) 999-9999' }
Step 3: Selectfield
{ //Multiple selection xtype: 'selectfield', label: 'Skills', name: 'skills', multiSelect: true, autoSelect: false, clearable: true, options: [ 'ExtJS', 'Javascript', 'CSS', 'Git', 'Java', 'PHP', 'COBOL', 'Node.js', 'JSON', 'HTML5', 'RIA', 'OOP', 'Scrum', 'REST', 'MVC' ], chipView: { plugins: { dataviewtip: { align: 'tl-br', constrainToView: false, delegate: '.x-close-el', allowOver: true, anchor: false, anchorToTarget: false, bind: '{record}', tpl: 'Remove skill {text}' } } } }
Sencha Fiddle:
Want more? Get hands on with all of our form components in the Kitchen Sink.
Try Ext JS 7.2
Packed with many enhancements, the newly released Ext JS version 7.2 is the perfect way to jumpstart your app development. If you haven’t already, try the 30-day fully-featured free trial of Ext JS—a robust framework, with 140+ components and many tools (Themer, Architect, Stencils, plugins and more) to create professional looking data-intensive apps.
Nice example but it should be mentioned that this uses the Modern toolkit.
There’s also one big limitation compared to the classic toolkit:
The button cannot be tied to the form with the ‘formbind’ property anymore. Thus it will always be active or must be enabled/disabled with custom code. This was a pretty convenient and great feature in the Classic toolkit.
Thank you for the feedback! We’re working on matching more features in the classic feature set in the next dev cycles, so I’ll aim to get this added to our engineering queue.
Thanks for the article. Simple & easy to follow. Works like a charm. Would definitely like to try out future updates and check them out. Cheers