Feature Request: Ext.Element.fireEvent();

[cnelissen]

Seems this has been discussed a couple times in the forums, and at least one time as a feature request (which was denied with no explanation in the post).... This just seems like such a logical feature for Ext.Element, I am wondering why it has not been implemented... Something like this would be beautiful:

Ext.Element.fireEvent = function (evt) {
	if (document.createEventObject) {
		var eventObj = document.createEventObject();
		this.dom.fireEvent('on' + evt, eventObj);
	} else {
		var eventObj = document.createEvent('MouseEvents');
		eventObj.initMouseEvent(evt, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		this.dom.dispatchEvent(eventObj);
	}
}

It would get called like so:

Ext.get('some-element').fireEvent('click');

*** This is obviously NOT tested, just an example of what I think it should look like.... Someone smarter than me could make something slick I'm sure. =) ***

This is (I would think) right inline with Ext's goals... Creating a common set of functions for true cross-browser compatible development. As-is, we have to do some hacky stuff to fire events on Html Elements between browsers...

Any input?

[evant]

Interesting idea, I know they have something like this in JQuery, however what's the use case for this? The only time you want to fire an event manually on an element is because you want to trigger the handlers on the element, so why not just do that?

[cnelissen]

Yes I suppose thats true, but there are some definate benefits to this method as opposed to calling the functions directly. Mostly it all comes down to code re-use. If I want to be able to fire an event programmatically while also having a way for the user to fire the event when necessary, this is an ideal approach.

1. - Cleaner code - It makes more sense to setup your listeners in one place, and then not have to repeat the function calls throughout your code. Just fire the event and not worry about what is actually listening at that moment.

2. - Multiple listeners - If you need to have multiple event handlers for a particular event, it makes it more difficult (more code) to call each function instead of just firing the event manually.

3. - Firing events from flash - This is a much easier approach to firing certain types of events from flash, especially when you need the user to be able to fire the event as well. For instance, I used this method for a lightbox that I wanted to open from flash at certain point in the movie, as well as let the user open it directly from a link on the page. Rather than calling the lightbox method from flash, I just fire the click event for the link that is already setup to open the lightbox.

4. - Firing events from other sources - i.e. google maps, etc. You can just fire a click event on a pin for instance, instead of having to wade through the API. Lazy but legitimate.

5. - Better cross browser support - Obviously you can fire events on elements programmatically in browsers now, but we run into the old "IE is different than everyone else" problem, which is one of the benefits of using a kick ass JS framework such as Ext in the first place. This would create a clean and unified mechanism for firing events on elements should the need arise.

[csbubbles]

I can give you some use case.

I use Ruby on Rails for dynamically creating web pages. Rails allows create html element without some knowledge of their basis. In that framework there is some thing called 'observable field' that gives possibility to add some handler to changing values. For example code generated by Rails will process AJAX-request when you change select tag value and then dynamically update form. But I would like that this action will be raised when I do something else. So it would be very suitable just to raise event onChange of select tag. Because actually I don't know what happens further. It's responsibility of Rails. And I don't have my own methods similar to 'onSomeComboChange()' to call them explicitly.

Interesting idea, I know they have something like this in JQuery, however what's the use case for this? The only time you want to fire an event manually on an element is because you want to trigger the handlers on the element, so why not just do that?

[sprakash]

Yes , I Too came across such requirements.

[tobiu]

+1

[ReSpawNnL]

+1... Missing this in ExtJS. I tried stuff with relayEvent and custom handeling but it just isn't the same!

[Animal]

I have already posted an FR for this along with code both here and in the tracker database.