触发合成ExtJS事件从jQuery或香草javascript事件

Trigger synthetic ExtJS event from jQuery or vanilla javascript event

本文关键字：事件 jQuery 香草 javascript ExtJS      更新时间：2023-09-26

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

field.fireEvent('blur', field);

然而，我不想这样做。我希望通过jQuery触发的普通事件触发验证:

$field.blur();

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

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

如果你想稍微改动一下:
以下是URL: 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事件之间创建这个桥梁的任何想法都将非常感谢。

用你的代码模拟本地事件确实有效(在非ie浏览器中):

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

然而，你应该避免这个问题，而不是给它一个奇怪的治疗，通过使用字段的validator而不是模糊事件监听器。这样，字段的setValue方法将触发它的验证…

如果你真的被它困住了，而不是通过模拟事件来增加一个(可能很脆弱的)复杂性层，我会直接调用字段的onBlur方法。这是Ext添加到DOM中的处理程序。它出现在第3节中。X和4。

相关文章：