Автоматическая установка фокуса для полей находящихся в formpanel

Фокусировка одного из полей ввода после показа панели сделает процесс заполнения формы более быстрым. Пользователям не нужно будет щелкнуть по соответствующему полю ввода, чтобы начать печатать. Функция фокусировки реализована в виде плагина. По умолчанию фокус всегда будет находится на первом поле. Если вам нужно будет сфокусировать определенное поле формы, вам нужно будет установить для свойства defaultFocused значение true в конфигурации поля.

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

Fiddle:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *