ExtJS 6.7 - 如何在每个表单组件上附加模糊和焦点事件？

Question

我想在字段集中时用自定义 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 中做到这一点

任何帮助表示赞赏

问候

阿曼多

Answer 1

你不需要它，ExtJs 已经有'.x-field-focus' css 类，它被添加到焦点的包装元素中，所以你可以尝试将你的样式添加到现有的类中。您还可以查看 $form-field-focus-* 主题变量..

无论如何，如果您想添加此功能，您可以覆盖作为所有表单字段的父级的“Ext.form.field.Base”类。 像这样的：

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