Firing Custom Events

[seanodonnell]

Hi There,

Im pretty new to ext, so apologies if this seems like a dumb quesiton, but no amount of doc crawling and googling has solved this one for me. Im trying to fire custom events on elements, and I will not necessarily know what element I need to fire it on until runtime.

I've found the docs for Observable.fireEvent, but unfortunately, the Element class returned by Ext.get does not appear to extend Observable. Is there another mechanism out there for doing this that I have missed?

Thanks

Sean

[evant]

When you say events, I'll assume you mean browser events (click, mouseover, etc).

You can do this, in 2 ways:

//operate on a single element
Ext.get('id').on('click', function(e)
{
   //do stuff
}
);

//operate on a group of elements
Ext.select('div.foo').on('click, function(e)
{
   //bar
}
);

[seanodonnell]

Im afraid not on both counts

First of all im looking to fire/create the events, not listen for them and perform an action, which it looks like your code is doing.

Second of all i would ideally like to fire any arbitary event, be it a browser event, or a custom event of my own making.

to give you an idea, in jquery I can do it with

$(target).trigger(event_name, [data]);

in mochikit

signal(target, event_name, data);

in mootools, its a little more complicated (this example is for ff/opera, i.e. is a little different)
event = document.createEvent("HTMLEvents");
event.initEvent(event_name, true, true);
event.target = target;
event.data = data;
target.fireEvent(event_name, event);


in dojo, although this does not really work for browser events

data = [target, data]
dojo.publish(event_name, data);


In yui (although im not sure about setting the target)

var ev = new YAHOO.util.CustomEvent(event_name);
ev.fire();

and finally in prototype

target.fire(event_name, data);


I can see how to catch the event and handle it, but trying to figure out how to generate it is driving me up the wall, any ideas?

Thanks

Sean

[jay@moduscreate.com]

You're obviously very skilled . So i think the docs should work for you.

http://extjs.com/deploy/dev/docs/?cl...til.Observable

[evant]

On the first count, I'd suggest you create your own class that inherits observable that wraps an Ext Element (assuming that's what you want to fire events from).

On the second count, you can use fireEvent() to trigger an event, however this won't work for DOM events.

[seanodonnell]

Thanks Jgarcia, Im obviously not skilled enough , but thank you for the compliment, I already found the docs for observable, I just cant figure out how to make my random target suddenly implement it, I guess I need to do some more reading on the ext class/object system.

Cheers

Sean

[jay@moduscreate.com]

Evant is correct if you're looking to do custom classes.

You can extend any class (which all extend from observable) and they will inherit the observable events model.


I say you're skilled because you have a broad understanding of other frameworks. I'll be honest, I dumped all of my knowledge of the other frameworks when i jumped onto ext. :P

[evant]

Very basic:

var MyClass = function(/* ctor options */)
{
   this.addEvents(
   'myEvent1',
    'myEvent2'
   );
};

Ext.Extend(MyClass, Ext.util.Observable, {
   myMethod1: function()
   {
      this.fireEvent('myEvent1', param1, param2, param3);
   }
}
);

[seanodonnell]

Thanks a million guys,

evant, that seems to be doing the job of firing for me perfectly, my only problem now is how
to tie that to the dom element in some way, if I listen for the event with

Ext.get('some_css_id').on("event_name", doStuff);

It doesnt recieve it, as I cant see anything there that ties the class to the dom element , as I imagine its my class instance, and not the dom node thats the event source, but ill puzzle that out later. Thanks a million , it would have taken me forever to get this far on my own.

Sean

[evant]

Something like this:

var MyClass = function(el)
{
   this.el = Ext.get(el);
   this.addEvents(
   'myEvent1',
   'myEvent2'
   );
};

Ext.Extend(MyClass, Ext.util.Observable, {
   myMethod1: function()
   {
      this.fireEvent('myEvent1', this.el);
   }
}
);

var x = new MyClass('some_css_id');
x.on('myEvent1', foo);