[英]Trigger synthetic ExtJS event from jQuery or vanilla javascript event
有一个用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); };
当您单击城市字段,然后单击其他字段时,您将看到输出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事件之间建立桥梁,将不胜感激。
用您的代码模拟本地事件确实可以(在非IE浏览器中):
var event = document.createEvent('HTMLEvents');
event.initEvent('blur', true, true);
$city.get(0).dispatchEvent(event);
但是,您应该通过使用字段的validator
而不是模糊事件侦听validator
来避免出现问题,而不能给出怪异的解决方法。 这样,字段的setValue
方法将触发其验证...
如果您真的坚持使用它,而不是通过模拟事件来增加(可能是脆弱的)复杂性层,我将直接调用字段的onBlur
方法。 那就是Ext将其添加到DOM的处理程序。 它存在于3.x和4.x中,并且不依赖于特定的浏览器...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.