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?

Answer 1

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

Answer 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?