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

Question

我想在字段聚焦时用自定义 css class 标记每个字段包装容器，并在字段模糊时删除 class。所以我想将 focus/blur 事件方法附加到我添加到任何表单的每个表单字段组件。

在 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 class 添加到焦点上的包装元素，因此你可以尝试添加你的样式到现有 class。您还可以查看 $form-field-focus-* 主题变量..

无论如何，如果你想添加这个功能，你可以覆盖'Ext.form.field.Base' class，它是所有表单字段的父级。像这样：

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

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

ExtJS 6.7 - How to attach blur and focus events on every form copoment?

extjs

extjs6