Creating Email Field Component in ExtJS6

Question

I am a beginner and I am trying to create the login page using ExtJS6. The simplest way I can do this is to create a panel containing items such as 2 text fields (username and password) and the button,but since the email and password text field are going to be reused again in signup as well so I want to avoid code duplication. As in both places we are going to have same validation rules ,we are going to have to have same titles for email and password .

I am thinking of creating an email text field component class and password text field class which is going to be extended by TextField class and use properties such as vtype,name in these custom define classes and in my login form/Signup form I use these custom fields so I will be able to avoid code duplication.

I would like other members to comment on this and tell me if this is the right solution or not and if yes then how I am going to achieve this .

Regards

Answer 1

Extjs 6 already provides an email and a password texfield. You can use their config properties to apply more validations.

You can create your own form panel like this:

Ext.define('App.view.LoginPanel', {
    extend: 'Ext.form.Panel',
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'Register',
            items: [
                {
                    xtype: 'emailfield',
                    label: 'Email',
                    name: 'email'
                },
                {
                    xtype: 'passwordfield',
                    label: 'Password',
                    name: 'password'
                }
            ]
        }
    ]
});

and use multiple instances of it where ever you want.