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

有一个使用ExtJS 3.1实现的网站。 我想自动预先填写一些字段。 问题是，当自动填充时，ExtJS不会validation某些字段。
我可以通过触发ExtJS的模糊事件来触发validation：

field.fireEvent('blur', field); 

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

 $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 =直接＆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.fireEvent('blur', city); 。 但是，当您执行$city.blur();时，您将看不到该输出$city.blur(); ， $city.trigger('blur'); 要么

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

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

Answer 1

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

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

但是，你应该通过使用字段的validator而不是模糊事件监听validator来避免问题而不是给它一个奇怪的解决方法。 这样，该字段的setValue方法将触发其validation…

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