JS Days 2025 is now live – Join 5,000+ devs for the premier virtual JavaScript event. Register Now

Creating an Ext JS Login/Registration Form in 3 Easy Steps

April 21, 2020 3446 Views
Show

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

Login Form

A simple example demonstrating how to create a login form.
example

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.

registration

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.

kitchensink

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.

Recommended Articles

Guide to Estimating ROI When Switching From DIY Libraries to Full Software Development Platforms Like Ext JS

Teams started with Do It Yourself, or DIY, JavaScript tools like jQuery and Bootstrap. But those fall apart as projects scale. Scattered code, user interface…

Top Frameworks Developers Are Using for Custom Software Development in 2025

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare, finance, logistics, and other data-heavy industries, there’s a clear shift.…

Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development

Building modern web applications should be exciting. But too often, developers find themselves buried in documentation, endlessly Googling framework quirks, or stuck solving the same…

Ext JS 7.9 & Rapid Ext JS V1.1 Have Arrived

The Sencha team is excited to announce the latest Ext JS version 7.9 and Rapid Ext JS 1.1 release – designed to accelerate development, enhance…

Top 10 JS Grid Customization Tips for a Better UI Experience

Grids are pretty much everywhere in web apps. Working with financial sheets, product details, or users? Then you’ve probably used a JavaScript grid. It makes…

Why Ext JS Framework is the Go-To Framework for Building Scalable and Data-Intensive Web Apps

Web apps are much more advanced now. They deal with large amounts of data and need to stay fast, even with many users. If you’re…

View More

Trusted by Top Developers: Learn how to enhance your development journey — for free

Get the latest newsletter keeping thousands of developers in the loop.

Loved by developers at