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 still can't make it work. I am happy to see your suggestion.

var simple = new Ext.FormPanel({

    labelWidth: 75, 
    url:'save-form.php',
    frame:true,
    title: 'Simple Form',
    bodyStyle:'padding:5px 5px 0',
    width: 350,
    defaults: {width: 230},
    defaultType: 'textfield',
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            id: 'first_name',
            allowBlank:false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        }, {
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }, new Ext.form.TimeField({
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm'
        })
    ],

    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});

simple.render(document.body);

I couldn't get this to work, even with the delay in ExtJS 4.2 .. I imagine this needs to be done in some callback, but I can't find out which one. I've tried the 'renderer' event listener on the view, and that did not work either. — JustBeingHelpful, Mar 31 '14 at 15:07
See also [Set focus for text input in just created window](https://stackoverflow.com/questions/11092833/set-focus-for-text-input-in-just-created-window) — Vadzim, Feb 26 '18 at 13:52

score 18 · Answer 1 · answered Jul 06 '11 at 05:12

18

Sometimes it helps to add a little delay when focusing. This is because certain browsers (Firefox 3.6 for sure) need a bit of extra time to render form elements.

Note that ExtJS's focus() method accepts defer as an argument, so try that:

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

answered Jul 06 '11 at 05:12

user123444555621

148,182
27
114
126

2

Thanks for your answer but it is not yet work. There may be another way to do it. Currently I am running it on browser FireFox 5.0. – Sokmesa Khiev Jul 06 '11 at 07:00

score 13 · Answer 2 · edited May 23 '17 at 12:17

13

Based on Pumbaa80's answer and Tanel's answer I have tried many things and found a way to do it. Here is the code:

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

edited May 23 '17 at 12:17

Community

1
1

answered Jul 06 '11 at 09:16

Sokmesa Khiev

2,910
3
19
30

If we even keep the argument as `true` in `focus()`, it still works? Can you please explain this behavior.. – Mr_Green Feb 14 '13 at 07:53
If this solution works, please mark it as an answer. – Athafoud Feb 03 '16 at 08:17

score 8 · Answer 3 · answered Jul 06 '11 at 07:32

8

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();
          }
        }
    }

answered Jul 06 '11 at 07:32

Tanel

175
1
4

Wrap simple.render(document.body) inside Ext.onReady, then you don't have to use delay – Tanel Jul 06 '11 at 10:15
If you use the config - allowBlank: false, this may cause some validation issues in which case you need to set the false parameter and a slight delay wont hurt as well, eg field.focus(false, 1000) – Steve Obbayi Jan 16 '13 at 20:56

Raza Ahmed · Answer 4 · 2013-09-20T12:13:53.630

5

why not just add defaultFocus : '#first_name' instead of adding to much lines of code?

OR, after this.callParent(arguments); add this line Ext.getCmp('comp_id').focus('', 10);

edited Sep 20 '13 at 12:13

answered Sep 05 '13 at 05:31

Raza Ahmed

2,661
2
35
46

1

The property defaultFocus appears to only be available for windows. Please correct me if I am wrong. – David Oct 24 '13 at 06:56
ExtJs 6.6.0, defaultFocus doesn't work - I have a TabPanel -> FormPanel->textField. – boggy Jun 26 '20 at 00:05

score 4 · Answer 5 · edited Sep 22 '12 at 00:38

4

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,
}

edited Sep 22 '12 at 00:38

Littm

4,923
4
30
38

answered Sep 11 '12 at 10:49

user1662505

41
2

score 3 · Answer 6 · answered Jun 24 '14 at 20:28

I've been struggling with that issue today, and I think I got the solution. The trick is using the focus() method after the show() method was called on the Form Panel. That is, adding a listener to the show event:

Ext.define('My.form.panel', {
    extend: 'Ext.form.Panel',
    initComponent: function() {
        this.on({
            show: function(formPanel, options) {
                formPanel.down('selector-to-component').focus(true, 10);
            }
    });
    }
});

amit · Answer 7 · 2016-04-13T11:30:10.527

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);
          }
        }
    }

score 1 · Answer 8 · answered Sep 20 '18 at 09:09

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.

score 0 · Answer 9 · answered Feb 20 '18 at 20:10

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
                    }
                }

score 0 · Answer 10 · answered Feb 22 '18 at 01:54

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;
  }
}

samsanthosh2008 · Answer 11 · 2016-02-23T07:43:34.983

-1

UIManager.SetFocusTo = function (row, column) {
    var grd = Ext.getCmp('gridgrn');
    grd.editingPlugin.startEditByPosition({ 'column': column, 'row': row });

}

edited Feb 23 '16 at 07:43

answered Feb 03 '16 at 07:26

samsanthosh2008

91
1
3

1

Please give some more details. What your code does? How it solves the ploblem? – Athafoud Feb 03 '16 at 08:00

Set focus on Extjs textfield

11 Answers11

Linked