extjs - 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);
}
});
推荐阅读
- javascript - 使用 css2drenderer 创建一个可点击的按钮并使动态大小取决于相机距离
- python - 如何读取具有一系列列的 .csv 文件?
- python - 如何检查用户输入是否与python中两个不同列表中的值匹配?
- python - Python - 处理类似 JSON 的字符串的最佳方法
- python - 如何使用 android studio 在谷歌云上运行 python 脚本?
- form-recognizer - 表单识别器支持的文档(图像和 pdf 除外)
- python - 是否有从 netCDF4 文件中提取文件路径的特定方法?
- android - 从 Visual Studio C++ proejct 为 android 创建共享对象 .so 文件
- python - 将双变量分布中的值标准化为 0-1 - python
- node.js - Webpack TypeError [ERR_INVALID_ARG_TYPE]:“路径”参数必须是字符串类型。收到未定义