Trigger synthetic ExtJS event from jQuery or vanilla javascript event

问题

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.

回答1:

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...

来源：https://stackoverflow.com/questions/25443597/trigger-synthetic-extjs-event-from-jquery-or-vanilla-javascript-event