1. #1
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    218
    Vote Rating
    1
    ZooKeeper is on a distinguished road

      0  

    Default jquery.live() analog in ExtJs

    jquery.live() analog in ExtJs


    The goal is to assign a listener to all existing nodes that fit the selector and the ones that are going to be created afterwards

    The good example would be to have a listener on all the anchors on the page.

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    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


    .mon()

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    218
    Vote Rating
    1
    ZooKeeper is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    .mon()
    Thanks a lot for reply, but it doesn't look like this is it.
    mon makes sure all the listeners are removed after component is destroyed.

    I'm looking for a method to add listeners to all the elements that will be created that match the selector.

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    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


    Then that would be .on

    DomQuery returns compositeElement if i'm not mistaken.

  5. #5
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    218
    Vote Rating
    1
    ZooKeeper is on a distinguished road

      0  

    Default


    I don't think you get what I want to implement.

    I want to automaticly assign listeners to the elements that WILL be created AFTER i assign the listener.

  6. #6
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    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


    Ah - that's what Live does. I don't think Ext JS has that.


    Can you explain a use case where that is *needed*?

  7. #7
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    218
    Vote Rating
    1
    ZooKeeper is on a distinguished road

      0  

    Default


    I want to catch all the links that have 'mailto:' in them for certain behaiviour.

    Cann't make sure I catch all of them

  8. #8
    Ext User
    Join Date
    Dec 2007
    Posts
    95
    Vote Rating
    0
    evanc is on a distinguished road

      0  

    Default


    Code:
    <div id="myContainer">
      <a href="mailto:red@example.com">one</a>
      <a href="mailto:green@example.com">two</a>
      <a href="mailto:blue@example.com">three</a>
    </div>
    .live() probably just runs code to add listeners to everything on a timer, which is crazy inefficient. Instead you should just add a click listener to div#myContainer:
    Code:
      Ext.get("myContainer").on('click', function (e) {
        if (e.getTarget().tagName == 'A' && e.getTarget().getAttribute('href').match(/^mailto:/) {
          e.stopEvent();
          //whatever
        }
      });
    That's untested but it should be pretty obvious as to what's going on. If you can't control ANYTHING about your page you could put the click handler on Ext.getBody() but I bet you can narrow it down further.

    The other great thing about this is, instead of creating potentially thousands of listeners, you're only creating one.

  9. #9
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    218
    Vote Rating
    1
    ZooKeeper is on a distinguished road

      0  

    Default


    Thanks a lot, mate!

    I'm not sure how live works. I doubt there's some cron going on. This guys are great and they know what they do.

    I think I'll go with Ext.getBody().on, since i have to make sure no link slips by.

  10. #10
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,000
    Vote Rating
    649
    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

      2  

    Default


    Use event delegation:

    Code:
    var parent = Ext.get('...'); //element that will contain all the items you want to fire on. If they can go anywhere, make it the document body.
    
    parent.on('click', function(){
        console.log('fire');
    }, null, {delegate: 'a[mailto]}); //some selector
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!