Set focus on Extjs textfield

Question

Currently I got problem with setting focus on extjs textfield. When form show, I want to set focus to First name text box and I try to use build in function focus() but stil

Answer 1

Use afterlayout event. Set a flag on the element to prevent focusing multiple times for stability.

afterlayout: function(form) {
  var defaultFocusCmp = form.down('[name=first]');
  if (!defaultFocusCmp.focused) {
    defaultFocusCmp.focus();
    defaultFocusCmp.focused = true;
  }
}

Answer 2

Try to add the following property:

hasfocus:true,

and use the function below:

Ext.getCmp('first_name').focus(false, 200);

{
    id: 'fist_name',
    xtype: 'textfield',
    hasfocus:true,
}

Answer 3

I have also been struggling with getting the focus on a text box in the Internet Explorer(As the above suggestions are working fine in chrome and Firefox). Tried the solutions suggested above on this page but none of them worked in IE. After so many research I got the workaround that worked for me, I hope it will be helpful to others as well:

Use focus(true) or if you want to delay this then use focus(true, 200) simply. In ref of the above problem the code would be:

  {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus(true);
          }
        }
    }

Answer 4

My form was inside of a window and the textfield would not focus unless I focused the window first.

                listeners: {
                    afterrender: {
                        fn: function(component, eOpts){
                            Ext.defer(function() {
                                if (component.up('window')){
                                    component.up('window').focus();
                                }
                                component.focus(false, 100);
                            }, 30, this);
                        },
                        scope: me
                    }
                }

Answer 5

You should use "afterrender" event for your textfield if you want to set focus after form is rendered.

    {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus();
          }
        }
    }

Answer 6

That works for me. In textfield or textarea add listeners config:

listeners:{
            afterrender:'onRender'
        }

After, in your controller write function:

onRender:function(field){
    Ext.defer(()=>{
        field.focus(false,100);
    },1);
}

Ext.defer is wrap for setTimout(). Without Ext.defer() field.focus() doesn't work and i don't why. You cant write that function in listeners config instead of using controller's function name, but good practice is hold functions in component's controller. Good luck.