extjs4 - how to focus on a text field?

Question

I can't seem to be able to focus a field in a form in extjs 4.

The doc lists a focus function for Text field (inherited from Component) but it doesn't do anything in terms of focusing to the input field.

Here's a sample code from the docs

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),        
    items: [{
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        allowBlank: false 
    }, {
        xtype: 'textfield',
        id:'email',
        name: 'email',
        fieldLabel: 'Email Address',
        vtype: 'email'  
    }]
});

If I call Ext.getCmp('email').focus() nothing visible happens.

What's the correct way to focus a field in extjs 4?

Possible duplicate of [Set focus on Extjs textfield](https://stackoverflow.com/questions/6591371/set-focus-on-extjs-textfield) — Vadzim, Feb 26 '18 at 13:49

score 5 · Answer 1 · answered Sep 24 '11 at 17:18

5

Sometimes a simple workaround is to slightly defer the focus call in case it's a timing issue with other code or even with the UI thread allowing the focus to take place. E.g.:

Ext.defer(function(){
    Ext.getCmp('email').focus();
}, 0);

answered Sep 24 '11 at 17:18

Brian Moeskau

20,103
8
71
73

I would think that the defer option in the focus method would allow you to do this properly, but that does not seem to be the case. Thanks for the tip. +1 – Mike Nov 19 '13 at 06:57

score 2 · Answer 2 · edited Aug 03 '12 at 12:45

2

Try this:

Ext.getCmp('email').focus(false, 20);

edited Aug 03 '12 at 12:45

Josh Darnell

11,304
9
38
66

answered Aug 03 '12 at 10:56

Sabinus

21
1

2

To improve the quality of your post, please include why/how your answer solves the problem. – Mick MacCallum Oct 06 '12 at 06:28
[This answer provides an explanation](http://stackoverflow.com/a/6591823/1062992) – egerardus Feb 24 '14 at 00:21

score 2 · Accepted Answer · answered Sep 24 '11 at 01:56

2

There isn't anything wrong with your code. I've made a jsfiddle for it and it works fine. Are you wrapping code in and Ext.onReady()? Also what browser are you using?

answered Sep 24 '11 at 01:56

rwilliams

21,188
6
49
55

on FF 6.0.2 mac. Definitely wrapped in onReady handler.. your jsfiddle works for me.. must be something somewhere else in my code that must be stealing focus.. I guess i can try trimming out the rest of the code to where it starts working again. At least i know focus _should_ work now, thanks – Ben Sep 24 '11 at 02:13

score 0 · Answer 4 · answered Feb 18 '13 at 13:00

0

Rather than work around with a delay, look for what is getting focus instead. Look out for focusOnToFront property on the parent.

answered Feb 18 '13 at 13:00

apfrod

341
3
10

extjs4 - how to focus on a text field?

4 Answers4