从jQuery或vanilla javascript事件触发合成ExtJS事件 [英] Trigger synthetic ExtJS event from jQuery or vanilla javascript event

问题描述

存在使用ExtJS 3.1实现的网站。
我想自动预先填写一些字段。问题是，一些字段在自动填充时不被ExtJS验证。

我可以通过触发ExtJS的模糊事件触发验证：

  field.fireEvent（'blur'，field）; 
  

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

  $ field.blur（）; 
  

我在这里询问如下：

如何以与浏览器相同的方式触发文本框的模糊事件，以便ExtJS的事件处理程序运行？

BTW：为什么我不想手动启动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中打开，op en Chrome的开发者控制台并粘贴以下文本：

 删除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';}）。项[0]; 
 
 var blurEventFireFn = city.events.blur.listeners [0] .fireFn; 
 
 city.events.blur.listeners [0] .fireFn = function（field）{console.log（'ExtJS blur fired！'）; blurEventFireFn（场）; }; 
  

当您点击城市字段，然后在其他某个字段中，您将看到输出 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）; 
  

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

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

There exists a website implemented with ExtJS 3.1. I want to pre-fill some fields automatically. The problem is, that some fields are not validated by ExtJS when automatically filling them.
I can trigger the validation by firing ExtJS's blur event:

field.fireEvent('blur', field);

However, I don't want to do this. I want that validation to be triggered by a normal event triggered via jQuery:

$field.blur();

What I am asking here is the following:
How to trigger the blur event of a textbox in the same way the browser does it, so that also ExtJS's event handlers run?

BTW: The reason why I don't want to manually fire the ExtJS event is simple: This solution seems to work for ExtJA 3.1 but no longer for 4.2 and I don't want to write special handling code for every version of ExtJS.

---

If you want to play around a little bit:
Here is the 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
Open it in Chrome, open Chrome's developer console and paste the following text:

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); };

When you click in the City field and then in some other field, you will see the output ExtJS blur fired! in the console. You will see the same output when you execute city.fireEvent('blur', city);. However, you won't see that output when you execute $city.blur();, $city.trigger('blur'); or

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

Any ideas how to create this bridge between normal events and ExtJS events would be greatly appreciated.

解决方案

Simulating the native event with your bit of code does work (in non-IE browsers):

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

However you should avoid the problem rather than giving it a weird cure, by using the validator of the field instead of a blur event listener. This way, the setValue method of the field will trigger its validation...

If you're really stuck with it, instead of adding a (probably fragile) layer of complexity by simulating events, I would just call the onBlur method of the fields directly. That's the handler that is added to the DOM by Ext. It is present in 3.x and 4.x, and it doesn't rely on specific browsers...

这篇关于从jQuery或vanilla javascript事件触发合成ExtJS事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！