Ext.Msg:prompt as password control

[zampedo]

Hi,

there are any method to use Ext.Msg.prompt as password control?
is possible make the input field become a password field instead of textfeild?

i've try the solutions find here but without results.

http://extjs.com/forum/showthread.ph...d+confirmation

Thanks,

[Animal]

"without results". What, the blue screen of death?

Anyway, you're in a browser, there's an input, just set it's type to "password". Not an Ext issue really. The window is just a div, it contains an input, you can easily grab it with DomQuery.

This is another "ooh, Ext is so difficult" thing, that's nothing to do with Ext.

[zampedo]

Hi Animal,

this is piece of code...

                        if (programmi.form.isValid()) {
                           Ext.MessageBox.prompt({
                            title:'password',
                            inputType :'password',
                            msg:'Please enter password:',
                            fn:function(btn, text){
                              if (btn == 'ok' && text == passwd){
                               .....
                              }
                             }
                            });
                           }

i've try also with:
Ext.MessageBox.getDialog().body.child('input').dom .type='password';
before the prompt...
But it works as a text not as a password.

[Animal]

Must be a browser issue, because if I type

Ext.MessageBox.getDialog().body.child('input').dom.type='password';
Ext.Msg.prompt();

At the Firebug command console, I get a password input in the popup.

[zampedo]

Hi Animal,

is correct as you have write..

The problem is that i have add :

Ext.MessageBox.getDialog().body.child('input').dom .type='text';

after prompt as the hongyuan example in:

http://extjs.com/forum/showthread.ph...d+confirmation

now it work correctly..

Thanks a lot

[meindert]

You can't change the type of a input element in IE7
http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/

So I added the script below to my global script file;
and changed the type change line to

CC_changetype(Ext.MessageBox.getDialog().body.child('input').dom, '')

function CC_changetype(target, wrde){
    var inp = document.createElement('input');
    inp.name = inp.id = target.id;
    inp.style.cssText = target.style.cssText;
    var parent = target.parentNode;

    if(target.value == wrde) {
        inp.type = 'password';
        inp.value = '';
        inp.maxLength = 8;
        inp.setAttribute('onblur', target.getAttribute('onfocus'));
        inp.setAttribute('onfocus', 'this.select();');
        var fcs = true;
    }
    else if (target.value == '') {
        inp.type = 'text';
        inp.maxLength = 99;
        inp.value = wrde;
        inp.setAttribute('onfocus', target.getAttribute('onblur'));
    }
    if(target.value == wrde || target.value == '') {
        parent.insertBefore(inp, target);
        parent.removeChild(target);
    }
    try{
    if(fcs) {
        inp.focus();
        inp.select();
    }
    }catch(ex){
    }
}

[razvanioan]

Trying to obtain the same effect, a password filed prompt, I saw that I cannot override the MessageBox being a singleton (does not have a prototype).

So I've changed (expanded) a little bit the Ext.MessageBox function to have support for a passwordPrompt as well.

It would be nice to be able to override this function as well in order not to mess the original code, or to be able to pass the configuration of the input field instead of hide / show textinput / textarea / and now password fields.

I will post it here maybe somebody else will find it useful:

1. added passwordEl variable in the variable list in the MessageBox header;

var dlg, opt, mask, waitTimer;
var bodyEl, msgEl, textboxEl, textareaEl, passwordEl, progressBar, pp, iconEl, spacerEl;
var buttons, activeTextEl, bwidth, iconCls = ''; 

2. Added an input type="password" after the textarea in getDialog method, and now it looks like:

bodyEl = dlg.body.createChild({
  html:'<div class="ext-mb-icon"></div><div class="ext-mb-content"><span class="ext-mb-text"></span><br /><div class="ext-mb-fix-cursor"><input type="text" class="ext-mb-input" /><textarea class="ext-mb-textarea"></textarea><input type="password" class="ext-mb-input" /></div></div>'
}); 

3. In the same method, below textareaEl.enableDisplayMode(); I've added:

passwordEl = Ext.get(contentEl.childNodes[2].childNodes[2]);
  passwordEl.enableDisplayMode();
  passwordEl.addKeyListener([10,13], function(){
  if(dlg.isVisible() && opt && opt.buttons){
    if(opt.buttons.ok){
      handleButton("ok");
    }else if(opt.buttons.yes){
      handleButton("yes");
    }
  }
}); 

4. Changed show method, the condition for prompt to:

if(opt.prompt){
  if(opt.multiline){
    textboxEl.hide();
    passwordEl.hide();
    textareaEl.show();
    textareaEl.setHeight(typeof opt.multiline == "number" ?
    opt.multiline : this.defaultTextHeight);
    activeTextEl = textareaEl;
  }else if(opt.password){
    passwordEl.show();
    textboxEl.hide();
    textareaEl.hide();
    activeTextEl = passwordEl;
  }else{
    textboxEl.show();
    textareaEl.hide();
    passwordEl.hide();
  }
}else{
  textboxEl.hide();
  textareaEl.hide();
  passwordEl.hide();
} 

5. After prompt method, I've added passwordPrompt method, which is exactly the same like prompt one, only has a password: true extra option. I didn't changed the options of prompt method to keep it working as well in the rest of the framework.

passwordPrompt : function(title, msg, fn, scope, multiline, value){
  this.show({
    title : title,
    msg : msg,
    password: true,
    buttons: this.OKCANCEL,
    fn: fn,
    minWidth:250,
    scope : scope,
    prompt:true,
    multiline: multiline,
    value: value
  });
  return this;
}, 

And in the code you can use it like: Ext.Msg.passwordPrompt({...usual config...});

[Tremor]

Thank you a lot, razvanioan!
It's a greate work! :-)

[Tremor]

I followed razvanioan advices and made file password.js (compressed, 7K).
You can add it after extjs-all.js and then you can use Ext.Msg.passwordPrompt.
Example:

<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="password.js"></script> 

[scaddenp]

I know this thread is a bit old now, but I thought I would post a way in which I got this to work (in the hope that it saves someone else some trouble). This was done using ExtJs 4.1, which changed the interface for the messagebox slightly.

var myMsgBox = new Ext.window.MessageBox();
myMsgBox.textField.inputType = 'password';
myMsgBox.prompt('Title','Label',function(btn,result) {
  if(btn=='ok') {
    if(result!=null) { //handles cancel being hit on the prompt
      //use string the user input (stored in result) here in an appropriate manner
    }
  }
});