How focus a textbox after using extjs Ext.MessageBox.alert

Question

I want to validate my extjs form. When the text field is empty, there should display an alert box and after that our cursor have to focus on the text box. I tried with the coding below. Alert is working fine. but cursor is not focusing. Can you please help me anybody to focus?

if(Ext.get('first').dom.value=='')
{
    Ext.MessageBox.alert('Status', 'Enter your First Name!');
    document.getElementById("first").focus();
}

Answer 1

The documentation states that MessageBox is asynchronous:

Note that the MessageBox is asynchronous. Unlike a regular JavaScript alert (which will halt browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code that should only run after some user feedback from the MessageBox, you must use a callback function (see the function parameter for show for more details).

So, your focus() is carried out immediately after the call to Ext.MessageBox.alert, not when the user dismisses it: When the user clicks to dismiss the alert, the focus will change again.

You could try using a regular javascript alert() instead, which is synchronous.

Answer 2

if (Ext.get("first").dom.value == "") {
    Ext.MessageBox.alert("Status", "Enter your First Name!", function() {
        Ext.get("first").focus();
    });
}

Answer 3

Try this

if(Ext.get('first').dom.value=='')
{
     Ext.Msg.alert('Status', 'Enter your First Name!', function(btn, text){
          if (btn == 'ok'){
               Ext.getCmp('first').focus(true,10);
          }
     });
}

Answer 4

Ext.getCmp('first').focus(true,10);

Works perfect. Thanks!

Answer 5

Thanks harley.

it surely works