ExtJS 6.7 -如何在每个窗体组件上附加模糊和聚焦事件?

bxgwgixi  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(204)

当字段聚焦时,我想用自定义css类标记每个字段 Package 容器,当字段模糊时,我想删除那个类。所以我想将focus/blur事件方法附加到我添加到任何表单的每个表单字段组件。
在Ext 4中,我是这样做:

  1. Ext.ComponentManager.all.on('add', function(map, key, item) {
  2. // Check if item is a Window and do whatever
  3. if (item instanceof Ext.form.field.Base) {
  4. item.on('focus', function(theField) {
  5. var parentDom = null; //theField.bodyEl.findParent('.x-form-fieldcontainer');
  6. if (!parentDom) {
  7. parentDom = theField.bodyEl.findParent('.x-field');
  8. }
  9. if (parentDom) {
  10. var parentEl = Ext.get(parentDom);
  11. parentEl.addCls('focused-field');
  12. }
  13. }, item);
  14. item.on('blur', function(theField) {
  15. var parentDom = null; //theField.bodyEl.findParent('.x-form-fieldcontainer');
  16. if (!parentDom) {
  17. parentDom = theField.bodyEl.findParent('.x-field');
  18. }
  19. if (parentDom) {
  20. var parentEl = Ext.get(parentDom);
  21. parentEl.removeCls('focused-field');
  22. }
  23. }, item);
  24. }
  25. });

我不知道如何在ExtJS 6中执行此操作
任何帮助都很感激
此致
阿曼多

ej83mcc0

ej83mcc01#

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

无论如何,如果您想添加此功能,您可以覆盖'Ext.form.field.Base'类,它是所有表单字段的父类。类似于:

  1. Ext.define('overrides.form.field.Base', {
  2. override: 'Ext.form.field.Base',
  3. customCssOnFocus: 'focused-field',
  4. initEvents: function() {
  5. this.callParent(arguments);
  6. this.on('focus', this.addCustomCssOnFocus, this);
  7. this.on('blur', this.removeCustomCssOnBlur, this);
  8. },
  9. addCustomCssOnFocus: function() {
  10. Ext.get(this.getEl().findParent('.x-field')).addCls(this.customCssOnFocus);
  11. },
  12. removeCustomCssOnBlur: function() {
  13. Ext.get(this.getEl().findParent('.x-field')).removeCls(this.customCssOnFocus);
  14. }
  15. });
展开查看全部

相关问题