Focusing one of the form fields after rendering the panel or changing the active tab with form items will make the filling process of the form faster. Users will not need to click on the appropriate field to begin the typing. The focusing feature was implemented as plugin.

By default it will focus the first field. If you will need to focus particular field of the form you will need to set the ‘defaultFocused’ property to true in the field config.

Ext.define('app.focus', {
    extend: 'Ext.plugin.Abstract',
    alias: 'plugin.focus',

    lastFocusedFieldId: false,

    init: function(component) {
        this.initEvents(component)
    },

    initEvents: function(component) {
        this.addFocusEventToFields(component);
        component.on('afterlayout', this.onComponentAfterLayout, this)
    },

    addFocusEventToFields: function(component) {
        var fields = component.query('field');
        Ext.Array.each(fields, function(field) {
            field.on('focus', this.onFieldFocus, this);
        }, this);
    },

    onFieldFocus: function(field) {
        this.lastFocusedFieldId = field.getId();
    },

    onComponentAfterLayout: function(component) {
        if(this.lastFocusedFieldId) {
            this.focusLastFocusedField(component);
        } else {
            this.focusDefaultField(component);
        }
    },

    focusLastFocusedField: function(component) {
        component.getComponent(this.lastFocusedFieldId).focus();
    },

    focusDefaultField: function(component) {
        var field = component.down('field[defaultFocused]') || component.down('field');
        if(field) {
            field.focus();
        }
    }
})

 

The plugin is tested for ExtJS 6.5.3 version.

In the following fiddle application you can see two tab panels with forms. The first panel is configured with ‘focus’ plugin the second one without.