Latest Ext JS 7.8 is now available. Learn more

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

April 21, 2020 423 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.

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.

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More