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

问题描述

当字段聚焦时，我想用自定义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已经将'.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);
    }
});