Блог

Я хотел бы пометить каждый контейнер для переноса полей пользовательским классом css, когда поле сфокусировано, и удалить этот класс, когда поле размыто. Итак, я хотел бы прикрепить методы событий фокусировки / размытия к каждому компоненту поля формы, который я добавляю в любую форму.

в Ext 4 я сделал это следующим образом:

 Ext.ComponentManager.all.on('add', function(map, key, item) {
    // Check if item is a Window and do whatever
    if (item instanceof Ext.form.field.Base) {
        item.on('focus', function(theField) {
            var parentDom = null; //theField.bodyEl.findParent('.x-form-fieldcontainer');
            if (!parentDom) {
                parentDom = theField.bodyEl.findParent('.x-field');
            }
            if (parentDom) {
                var parentEl = Ext.get(parentDom);
                parentEl.addCls('focused-field');
            }
        }, item);
        item.on('blur', function(theField) {
            var parentDom = null; //theField.bodyEl.findParent('.x-form-fieldcontainer');
            if (!parentDom) {
                parentDom = theField.bodyEl.findParent('.x-field');
            }
            if (parentDom) {
                var parentEl = Ext.get(parentDom);
                parentEl.removeCls('focused-field');
            }
        }, item);
    }
});
  

Я не уверен, как это сделать в ExtJS 6

Любая помощь приветствуется

С уважением

Армандо

Вам это не нужно, в ExtJS уже есть css-класс ‘.x-field-focus’, который добавляется к элементу-оболочке при фокусировке, поэтому вы можете попробовать добавить свои стили к существующему классу. Вы также можете посмотреть на переменные темы $form-field-focus-*..

В любом случае, если вы хотите добавить эту функциональность, вы можете переопределить ‘Ext.form.field.Базовый’ класс, который является родительским для всех полей формы. Что-то вроде этого:

 Ext.define('overrides.form.field.Base', {
    override: 'Ext.form.field.Base',
    
    customCssOnFocus: 'focused-field',
    
    initEvents: function() {
        this.callParent(arguments);
        this.on('focus', this.addCustomCssOnFocus, this);
        this.on('blur', this.removeCustomCssOnBlur, this);
    },
    
    addCustomCssOnFocus: function() {
        Ext.get(this.getEl().findParent('.x-field')).addCls(this.customCssOnFocus);
    },
    
    removeCustomCssOnBlur: function() {
        Ext.get(this.getEl().findParent('.x-field')).removeCls(this.customCssOnFocus);
    }
});