PDA

View Full Version : How to focus on input type password in the dialog?



psewt
6 Dec 2012, 8:37 AM
I have this dialog showing input field for a password. I need to focus on the input field after the dialog is shown. How can I do it?



Ext.MessageBox.show({
title: 'Password',
msg: 'Password:<br/><input id="passwordInput" type="password"/>',
buttons: Ext.MessageBox.OKCANCEL,
fn: function(btn) {
if (btn == "ok") {
submitPassword();
}
}
});

suzuki1100nz
6 Dec 2012, 11:32 PM
Hi Have a look at the api sample - http://docs.sencha.com/touch/2-1/#!/api/Ext.Msg (http://docs.sencha.com/touch/2-1/#!/api/Ext.Msg)

psewt
7 Dec 2012, 12:41 AM
Hi Have a look at the api sample - http://docs.sencha.com/touch/2-1/#!/api/Ext.Msg (http://docs.sencha.com/touch/2-1/#!/api/Ext.Msg)

I'm sorry but this doesn't help me, I forgot to me mention that I need it to do in ExjJS 4 on a normal desktop.

suzuki1100nz
7 Dec 2012, 2:11 AM
Look at the example with a text field.
What are you trying to do?
Give some context - Is this a user loging into an app?
Is this a user actioning a use case that requires a password verification?

?????

A message box may not be the best way to handle this

psewt
7 Dec 2012, 3:00 AM
Look at the example with a text field.
What are you trying to do?
Give some context - Is this a user loging int an app?
Is this a user actioning a use case that requires a password verifiction?

?????

A meesage box may not be the best way to handle this

Sorry I did expect the case is clear. It is a normal modal password dialog which pops up for a user to enter the password and I want to focus on the input field right after the popup. The input field needs to be of type password, hence the code above may look a bit untraditional, but it works, the problem is only that I don't know how to focus, because this dialog runs asynchronously and when I do set focus after the code it does not work:



Ext.MessageBox.show({
title: 'Password',
msg: 'Password:<br/><input id="passwordInput" type="password"/>',
buttons: Ext.MessageBox.OKCANCEL,
fn: function(btn) {
if (btn == "ok") {
submitPassword();
}
}
});

Ext.get('passwordInput').focus(); // not working

suzuki1100nz
7 Dec 2012, 11:20 AM
Apologies re the link to a touch messagebox I meant to post this.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window.MessageBox

ok - Again not sure why you don't just use an ExtJS textfield as I suggested.
It has a config called inputType. A message box is a window so you can add component config to it. look at the example using the method show.
Set inputType config on the textfield to "password" and it will do the masking.
When the message box displays, ExtJS will set the focus to the field for you.
No special code needed.

If you want to progress with what you've done, you will need to create an onRender listener and in the fired function call focus.
This will ensure the message box is in the dom before focus is called.

psewt
10 Dec 2012, 9:42 AM
Do you have some working example? I've already spent few days and tried lot of solutions on this but I really don't know how to do it.
Ext.MessageBox is a singleton, so how can I pass config to it? How can I add the ExtJS textfield to it?
I've tried to add the listener to the show function, but it does not work, because it does not have listener config. The inputType: 'password' does not work either.
I'm a beginner so I really need a working example.




Ext.MessageBox.show({
title: 'Password',
msg: 'Password:<br/><input id="passwordInput" type="password"/>',
buttons: Ext.MessageBox.OKCANCEL,
fn: function(btn) {
if (btn == "ok") {
submitPassword();
}
},
listeners: {
render: function() {
Ext.get('passwordInput').focus();
}
}
});