Question

I’m using ExtJS 3.0 and I would like to extend FormPanel or any solution so that everytime I show a form, the first field should get focus. I was thinking of adding a global listener (if such exists) like this perhaps:

afterrender: function() {
Ext.getCmp('formAddProgPaymentDoc').findByType('textfield')[0].focus(); //// Get the first textfield and focus it
}

Can this be done ? I have more than 40 forms and I don’t want to add each one a listener, I would like to get it’s listener automatically for each one.

Thanks.

Answer 1

Create an ExtOverrides.js file which will modify base functionality of Ext. And add the following code:

Ext.override(Ext.FormPanel, {
    onRender: function(ct, position){
        this.initFields();
        Ext.FormPanel.superclass.onRender.call(this, ct, position);
        this.form.initEl(this.body);

        //Begin edit of default functionality
        var firstFieldItem = this.getForm().items.first();
        if(firstFieldItem){
            //delay the focus for 500ms to make sure the field is visible
            firstFieldItem.focus(true,500);
        }
        //End edit of default functionality
    }
})

You need to be careful when using ExtOverrides though – when you update to new versions of Ext you will need to verify that you update the default functionality in the override.