CODEWITHSUNDEEP
extjsextjs4
Ben
Ben

Reputation: 21249

extjs4 - how to focus on a text field?

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?

Upvotes: 2

Views: 16456

Answers (4)

apfrod
apfrod

Reputation: 341

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

Upvotes: 0

Sabinus
Sabinus

Reputation: 21

Try this:

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

Upvotes: 2

Brian Moeskau
Brian Moeskau

Reputation: 20429

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

Upvotes: 5

rwilliams
rwilliams

Reputation: 21497

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?

Upvotes: 2

Related Questions