1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    6
    Vote Rating
    0
    seanodonnell is on a distinguished road

      0  

    Default Firing Custom Events

    Firing Custom Events


    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

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,657
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


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

    You can do this, in 2 ways:

    Code:
    //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
    }
    );

  3. #3
    Ext User
    Join Date
    Mar 2008
    Posts
    6
    Vote Rating
    0
    seanodonnell is on a distinguished road

      0  

    Default


    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

  4. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

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

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,657
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.

  6. #6
    Ext User
    Join Date
    Mar 2008
    Posts
    6
    Vote Rating
    0
    seanodonnell is on a distinguished road

      0  

    Default


    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

  7. #7
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,657
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Very basic:

    Code:
    var MyClass = function(/* ctor options */)
    {
       this.addEvents(
       'myEvent1',
        'myEvent2'
       );
    };
    
    Ext.Extend(MyClass, Ext.util.Observable, {
       myMethod1: function()
       {
          this.fireEvent('myEvent1', param1, param2, param3);
       }
    }
    );

  9. #9
    Ext User
    Join Date
    Mar 2008
    Posts
    6
    Vote Rating
    0
    seanodonnell is on a distinguished road

      0  

    Default


    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

  10. #10
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,657
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Something like this:

    Code:
    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);

Thread Participants: 2