[v1.1 - 11/15/2011] Ext.ux.LoginDialog - LoginDialog Extension

[sumit.madan]

ExtJS 4.x extension for a Login Dialog Window.

Extract the zip file to ExtJS examples folder.



LoginDialog extends Ext.window.Window, so any window config options can be provided. Specific to this extension are the following properties, which can be used to configure the LoginDialog.

 messages: {loginfailed: String, wait: String, header: String}
 qtips: {rememberme: String, capslockwarning: String}

 headerPanel: Ext.panel.Panel
 formPanel: Ext.form.Panel

 usernameField: Ext.form.field.Text
 passwordField: Ext.form.field.Text
 languageField: Ext.form.field.Combobox, Ext.ux.IconCombo
 rememberMeField: Ext.form.field.Checkbox

 forgotPasswordLink: String

 loginAction: Ext.button.Button
 cancelAction: Ext.button.Button

Events:

success, failure

Change Log:

v1.1:
> Compatible with ext-dev.js
> Changed: KeyMap instead of SpecialKeys to capture ENTER and ESC
> MIT License

v1.0:
> Initial Version

[sumit.madan]

Frequently Asked Questions (FAQ):

Q. How do I customize / replace the language combo with another field?
A: Language combo is completely customizable, eg. to replace it with a theme combo, the following config can be used:

languageField: {
    xtype: 'iconcombo',
    name: 'theme',
    fieldLabel: 'Theme',
    valueField: 'themeCode',
    value: 'gray',
    displayField: 'themeName',
    iconClsField: 'theme-icon',
    triggerAction: 'all',
    editable: false,
    mode: 'local',
    store: {
        fields: ['themeCode', 'themeName', 'theme-icon'],
        data: [
            ['gray', 'Gray', 'theme-gray'],
            ['blue', 'Blue', 'theme-blue']
        ]
    }
}

Q. I don't need the language combo and remember me checkbox, how do I hide them?
A. Any valid field config can be used for the fields, such as:

height: 230, // window height
languageField: {
    hidden: true
},
rememberMeField: {
    hidden: true
}

[sumit.madan]

LoginDialog extension updated to v1.1:

Change Log:

v1.1:
> Compatible with ext-dev.js
> Changed: KeyMap instead of SpecialKeys to capture ENTER and ESC
> MIT License

[drplasma]

thanks for your share to the community.That would be great if you shared a demo or a photo of the logindialog so we could try its features.you can create a demo page on github easily.

[sumit.madan]

thanks for your share to the community.That would be great if you shared a demo or a photo of the logindialog so we could try its features.you can create a demo page on github easily.

The original post has screenshot embedded from an external url. If you're unable to see it for some reason, I've also added it as an attachment in the first post

[drplasma]

You are right.Many websites are filtered from my server here.Looks pretty and working.It's what i was searching for...

[wehtam]

Hello,

Thanks for your plugin.
How can I change the fieldlabel of (UserName and Password) and the text of the buttons when I select another Language ?

Thanks

[ajaxvador]

not +1 but +2

[opticyclic]

This works with 4.0.7 but produces a blank screen with 4.1.1.
"TypeError: el is null"

[zeke]

This works with 4.0.7 but produces a blank screen with 4.1.1.
"TypeError: el is null"

This is because the version of the IconCombo extension that is included in the attached .zip does not work with 4.1.1. Updates for that extension have been discussed in this thread:

http://www.sencha.com/forum/showthread.php?131184-IconCombo

I just replaced IconCombo.js with the code found at https://gist.github.com/3078460, changed line 8 of that code from

Ext.define('Ext.ux.IconCombo',{

to

Ext.define('Ext.ux.form.IconCombo',{ 

and everything works fine.