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 stil

Answer 1

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

}

Answer 2

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

Answer 3

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

Answer 4

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 5

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