从 jQuery 或 vanilla javascript 事件触发合成 ExtJS 事件

Posted 2023-02-26

【中文标题】从 jQuery 或 vanilla javascript 事件触发合成 ExtJS 事件

【英文标题】：Trigger synthetic ExtJS event from jQuery or vanilla javascript event

【发布时间】：2014-08-22 09:19:58

【问题描述】：

存在一个使用 ExtJS 3.1 实现的网站。 我想自动预填充一些字段。问题是，某些字段在自动填充时没有被 ExtJS 验证。 我可以通过触发 ExtJS 的 blur 事件来触发验证：

field.fireEvent('blur', field);

但是，我不想这样做。我希望通过 jQuery 触发的正常事件触发该验证：

$field.blur();

我在这里要问的是： 如何以与浏览器相同的方式触发文本框的模糊事件，以便 ExtJS 的事件处理程序也运行？

顺便说一句：我不想手动触发 ExtJS 事件的原因很简单：这个解决方案似乎适用于 ExtJA 3.1，但不再适用于 4.2，我不想为每个版本编写特殊处理代码ExtJS。

---

如果你想玩一点： 这是网址：https://www.pantaenius.com/en/service/login/request-a-quote.html?utm_source=http%3A%2F%2Fwww.pantaenius.com%2Fen%2Famerican-yacht-insurance.html&utm_medium=direct&domain_segment=33 在 Chrome 中打开它，打开 Chrome 的开发者控制台并粘贴以下文本：

delete console.log

var $city = jQuery('#ext-comp-1080');
var city = Ext.ComponentMgr.all.filterBy(function(x)  return x.isXType('combo') && x.id==='ext-comp-1080'; ).items[0];

var blurEventFireFn = city.events.blur.listeners[0].fireFn;

city.events.blur.listeners[0].fireFn = function(field)  console.log('ExtJS blur fired!'); blurEventFireFn(field); ;

当您单击 City 字段，然后单击其他字段时，您将在控制台中看到输出 ExtJS blur fired!。当您执行city.fireEvent('blur', city); 时，您将看到相同的输出。但是，当您执行 $city.blur();、$city.trigger('blur'); 或

时，您不会看到该输出

var event = document.createEvent('HTMLEvents');
event.initEvent('blur', true, true);
$city.get(0).dispatchEvent(event);

任何关于如何在正常事件和 ExtJS 事件之间建立桥梁的想法将不胜感激。

【参考方案1】：

使用您的代码模拟原生事件确实有效（在非 IE 浏览器中）：

var event = document.createEvent('HTMLEvents');
event.initEvent('blur', true, true);
$city.get(0).dispatchEvent(event);

但是，您应该通过使用字段的validator 而不是模糊事件侦听器来避免这个问题，而不是给它一个奇怪的解决方法。这样，该字段的setValue 方法就会触发其验证...

如果您真的坚持下去，我不会通过模拟事件来添加（可能很脆弱）复杂性层，而是直接调用字段的onBlur 方法。这就是 Ext 添加到 DOM 的处理程序。它存在于 3.x 和 4.x 中，并且不依赖于特定的浏览器...

【讨论】：

我知道我的代码可以模拟原生事件。问题是它不会触发 ExtJS 事件。我也无法更改该网站的代码，我正在尝试创建一个简化某些任务的用户脚本。在该字段上调用 ​​validate 也不会产生所需的结果。尝试使用 jQuery 添加值，在字段上调用 ​​validate，然后单击“转发”按钮。它仍然说需要填写城市字段。代码$city.val('some value'); city.validate()