Wiki

ExtJS 6.5 User Extensions

Topics:

Extensions:

• Login Dialog
• Register Dialog

Plugins:

• Hide Grouped Header
• MsgBus

Login Dialog

class: Ext.ux.form.LoginDialog

xtype: logindialog

LoginDialog extends Ext.Panel, so any panel config options can be used. Specific to this extension are the following properties, which can be used to further configure the Login Dialog.

language                 // object
headerPanel              // container
usernameField            // textfield
passwordField            // passwordfield
capsLockWarning          // label
forgotPasswordAction     // button
languageField            // combobox
loginAction              // button
formPanel                // formpanel

The language config object localizes all strings in the extension, and can be used to provide additional languages. The user can switch between languages using language combo selection.

The default language for the dialog can be specified by the default property

Language config : en-us

{
    default: 'en-us',
    'en-us': {
        description: 'English - United States',
        title: 'Sign in',
        subtitle: 'or <a href=#>Create account</a>',
        status: '',
        capslockwarning: '<span class="x-fa fa-warning">&nbsp;Caps Lock is On</span>',
        waitmsg: 'Please wait...',
        field: {
            label: {
                username: 'Username',
                password: 'Password',
                language: 'Language'
            },
            validation: {
                required: {
                    username: 'Enter a username',
                    password: 'Enter a password'
                }
            }
        },
        button: {
            text: {
                forgotpassword: 'Forgot Password ?',
                login: 'Login'
            }
        }
    }
}

The other properties are standard Ext components and will accept config options for the specified components.

Usage:

Ext.Viewport.add({
    xtype: 'logindialog',
    zIndex: 1,
    formPanel: {
        url: '/users/login'
    },
    language: {
        'it': {
            description: 'Italiano‬',
            title: 'Accedi',
            subtitle: 'o <a href=#>Crea un account</a>',
            status: '',
            capslockwarning: '<span class="x-fa fa-warning">&nbsp;Blocco maiuscole attivo</span>',
            waitmsg: 'Attendere prego...',
            field: {
                label: {
                    username: 'Nome utente',
                    password: 'Password',
                    language: 'Lingua'
                },
                validation: {
                    required: {
                        username: 'Inserisci un nome utente',
                        password: 'Inserisci una password'
                    }
                }
            },
            button: {
                text: {
                    forgotpassword: 'Password dimenticata?',
                    login: 'Accedi'
                }
            }
        }
    }
});

The above example creates a Login Dialog panel, adds a Italian language config, and specifies the submit url for the formpanel.

Server response:

Failure (set field validation errors):

{
    "success": false,
    "errors": {
        "field-username": "Username should be atleast 5 characters",
        "field-password": "Wrong password. Try again."
    },
    "message": "Cannot log you in."
}

Success:

{
    "success": true,
    "message": "Please wait, while we log you in..."
}

Register Dialog

class: Ext.ux.form.RegisterDialog

xtype: registerdialog

RegisterDialog extends Ext.Panel, so any panel config options can be used. Specific to this extension are the following properties, which can be used to further configure the Register Dialog.

language                 // object
headerPanel              // container
nameContainer            // containerfield
firstnameField           // textfield
lastnameField            // textfield
usernameField            // textfield
passwordField            // passwordfield
capsLockWarning          // label
emailField               // textfield
registerAction           // button
formPanel                // formpanel

The language config object localizes all strings in the extension, and can be used to provide additional languages.

The default language for the dialog can be specified by the default property

Language config : en-us

{
    default: 'en-us',
    'en-us': {
        description: 'English - United States',
        title: 'Create account',
        subtitle: 'or <a href=#>Sign in</a>',
        status: '',
        capslockwarning: '<span class="x-fa fa-warning">&nbsp;Caps Lock is On</span>',
        waitmsg: 'Please wait...',
        field: {
            label: {
                name: 'Name',
                firstname: 'First',
                username: 'Username',
                password: 'Password',
                lastname: 'Last',
                email: 'Email'
            }
        },
        button: {
            text: {
                register: 'Submit'
            }
        }
    }
}

The other properties are standard Ext components and will accept config options for the specified components.

Usage:

Ext.Viewport.add({
    xtype: 'registerdialog',
    zIndex: 1,
    formPanel: {
        url: '/users/add.json'
    },
    language: {
        default: 'en-us',
        'it': {
            description: 'Italiano‬',
            title: 'Crea un account',
            subtitle: 'o <a href=#>Accedi</a>',
            status: '',
            capslockwarning: '<span class="x-fa fa-warning">&nbsp;Blocco maiuscole attivo</span>',
            waitmsg: 'Attendere prego...',
            field: {
                label: {
                    name: 'Nome',
                    firstname: 'Nome',
                    lastname: 'Cognome',
                    username: 'Nome utente',
                    password: 'Password',
                    email: 'Email'                            
                }
            },
            button: {
                text: {
                    register: 'Invia'
                }
            }
        }
    }
});

The above example creates a Register Dialog panel, adds a Italian language config, and specifies the submit url for the formpanel.

Failure (set field validation errors):

{
    "success": false,
    "errors": {
        "field-username": "Username should be atleast 5 characters",
        "field-password": "Password should have atleast 1 special character"
    },
    "message": "Account cannot be created."
}

Success:

{
    "success": true,
    "message": "Account created successfully."
}

Hide Grouped Header

class: Ext.ux.grid.plugin.HideGroupedHeader

alias: plugin.hidegroupedheader

Usage:

// Ext.grid.Grid (or derived class) config

plugins: {
    hidegroupedheader: true
}

MsgBus

class: Ext.ux.plugin.MsgBus

alias: plugin.msgbus

API: http://extjs.eu/ext-ux-msgbus-plugin/

Usage:

// Component config

plugins: {
    msgbus: true
}