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

Answer 1

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

Answer 2

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