PDA

View Full Version : [v1.1 - 11/15/2011] Ext.ux.LoginDialog - LoginDialog Extension



sumit.madan
10 Nov 2011, 10:03 PM
ExtJS 4.x extension for a Login Dialog Window.

Extract the zip file to ExtJS examples folder.

http://img269.imageshack.us/img269/6962/logindialog.png

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
10 Nov 2011, 10:33 PM
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
15 Nov 2011, 3:48 AM
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
15 Nov 2011, 4:58 AM
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
15 Nov 2011, 5:22 AM
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
15 Nov 2011, 6:25 AM
You are right.Many websites are filtered from my server here.Looks pretty and working.It's what i was searching for...

wehtam
24 Nov 2011, 1:34 AM
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
24 Nov 2011, 2:02 AM
=D> not +1 but +2

opticyclic
5 Sep 2012, 8:35 AM
This works with 4.0.7 but produces a blank screen with 4.1.1.
"TypeError: el is null"

zeke
29 Sep 2012, 1:18 PM
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
(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.


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

mohaskuar
26 Nov 2012, 10:36 PM
your code works fine,but i wanted to use it in my mvc based appliction.....is it possible? how so....just a bit of hint.

ByteLess
1 Feb 2013, 7:50 AM
not working in version 4.1.1

TypeError: t is null

blopes
29 Mar 2013, 7:39 AM
Hi There,

I am not able to successfully submit by redirect it to an index page.

Here is my configuration:

app.html

Ext.onReady(function() {
Ext.tip.QuickTipManager.init();

var loginDialog = Ext.create('Ext.ux.LoginDialog', {
forgotPasswordLink: '<a href="http://support.microsoft.com/kb/189126" target="_blank">Forgot Password ?</a>',
formPanel: {
url: 'index.jsp'
}
});

loginDialog.show();
});

Where press on the Login :






POST http://localhost:8080/InMed/index.jsp

200 OK

chrome://firebug/content/blank.gif
387ms
ext-all-debug.js (line 23637)





Ext.Error: You're trying to decode an invalid JSON String: <script type="text/javascript"> <script type="text/javascript">
...

Can you provide an example of the content of the URL that can be used ?

Can it be a simple call to an initial client initial file ? How to make this a JSON string ?

Thank you in advance.

Bruno

4L4Y
14 Apr 2013, 3:06 AM
i cant preview this plugin, how to configure??

this my prev when i run this html on localhost.
whats wrong?
43132

adwebtiser
15 Apr 2013, 7:14 AM
What version of Extjs are you trying this on? If 4.2, you are going to get that unless you remove the language iconcombo from it completely. I am currently trying to rewrite the iconcombo code to get it to work with 4.2.

joenilson
14 May 2013, 8:12 AM
Hi, i'm ussing the logindialog 1.1 extension and put the code to IconCombo.js from the https://gist.github.com/RLovelett/3078460/raw/b576359f8ddfbb3a57f7923590155803d90a24ce/IconCombo.js site and the login is render fine using ext-4.2.0.

4L4Y
15 May 2013, 2:15 AM
im using 4.2.
Im still getting error, error like this. i have not ux.form.iconCombo in my resource Extjs 4.2
43796

where i fine the ux iconCombo?

thanks for reply guys

joenilson
17 May 2013, 9:13 AM
Hi, i was added localization to the form in english, spanish, french and portuguese, is easy to add more languages.

The IconCombo is working fine.

I tested it with Extjs 4.2.0.663 GPL.

I hope it help us.

best Regards.

JN

NicoLP
24 May 2013, 12:43 PM
hi

what is the json format to return to the dialog ????

Nico

joenilson
28 May 2013, 6:27 AM
If is success true the response will be:

{"success":true,"redirect":"\/your\/awesome\/app"}

If the success is fail the response will be:

{"success":false, "redirect":"\/auth\/login","message":"Error in authentication"}

Richie1985
16 Oct 2013, 3:53 AM
i checked the "remember me" box, but i think thats not enough.

What else should i do to get a remember me function?

And why ask my browser not if i want to save username and password like every other page?

Richie1985
5 Aug 2014, 2:35 AM
hello again, are there any news for using remember me function?