Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Why 'this' points to different type of objects?

  1. #1
    Sencha User g2mac's Avatar
    Join Date
    Jun 2009
    Location
    Odessa, Ukraine
    Posts
    69
    Vote Rating
    0
      0  

    Wink Unanswered: Why 'this' points to different type of objects?

    Hello!

    I'm confusing with 'this' inside .on() handler.
    Here is my code:
    Code:
    Ext.get(Ext.query('select',myFormNode)[0]).on('change',function(){
    console.log(this)
    });
    Here this is ExtJS Object.
    Code:
    Ext.select('input',myFormNode).on('keydown',function(){
    console.log(this)
    });
    And here this is HTML Object.
    Why?

  2. #2
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Answers
    1
    Vote Rating
    3
      0  

    Default

    Because the 2 different methods you are using return different things:

    Look at the return type for Ext.query and Ext.select in the docs - select returns a CompositeElement while query returns an array of Dom nodes.

    Also, look at the scope param to addListener (on).

  3. #3
    Sencha User g2mac's Avatar
    Join Date
    Jun 2009
    Location
    Odessa, Ukraine
    Posts
    69
    Vote Rating
    0
      0  

    Default

    But anyway before .on we have ExtObject.
    In first case Ext.get() returns Ext.Element and in the second Ext.select() returns Ext.CompositeElement and anyway an event catches a HTMLElement, so why inside function(){} this is not only a HTMLElement or not only a Ext.Element?

  4. #4
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Answers
    1
    Vote Rating
    3
      0  

    Default

    Use the third param to specify scope and force this to be what you want.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,608
    Answers
    15
    Vote Rating
    59
      0  

    Default

    Quote Originally Posted by g2mac View Post
    But anyway before .on we have ExtObject.
    In first case Ext.get() returns Ext.Element and in the second Ext.select() returns Ext.CompositeElement and anyway an event catches a HTMLElement, so why inside function(){} this is not only a HTMLElement or not only a Ext.Element?
    It's not a CompositeElement. It's a CompositeElementLite.

    The difference is that a CompositeElement maintains an Array of Ext.Elements, and so that WOULD give you an Ext.Element in your handler.

    But Ext Core does not have the CompositeElement class, it has the CompositeElementLite class, and I think that has a bug.

    try

    Code:
    Ext.override(Ext.CompositeElementLite, {
        addListener : function(eventName, handler, scope, opt){
            var els = this.elements,
                len = els.length,
                i, e;
            
            for(i = 0; i<len; i++) {
                if(e = els[i]) {
                    Ext.EventManager.on(e, eventName, handler, scope || me.getElement(e), opt);
                }
            }
            return this;
        }
    });

    That uses the shared flyweight Element as the "this" reference, not an HTML element.

    If that works for you, then I think I'll submit this as a Bug Report.

  6. #6
    Sencha User g2mac's Avatar
    Join Date
    Jun 2009
    Location
    Odessa, Ukraine
    Posts
    69
    Vote Rating
    0
      0  

    Default

    But with or without your override I get HTMLElement inside my handler.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,608
    Answers
    15
    Vote Rating
    59
      0  

    Default

    Did you continue to use "on"??

    The override only overrides addListener!

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,608
    Answers
    15
    Vote Rating
    59
      0  

    Default

    And the code needs to be

    Code:
    Ext.override(Ext.CompositeElementLite, {
    
    //  Only need this prior to 3.1!
        getElement : function(el){
            // Set the shared flyweight dom property to the current element
            var e = this.el;
            e.dom = el;
            e.id = el.id;
            return e;
        },
    
        addListener : function(eventName, handler, scope, opt){
            var me = this,
                els = me.elements,
                len = els.length,
                i, e;
            
            for(i = 0; i<len; i++) {
                if(e = els[i]) {
                    Ext.EventManager.on(e, eventName, handler, scope || me.getElement(e), opt);
                }
            }
            return me;
        }
    });

  9. #9
    Sencha User g2mac's Avatar
    Join Date
    Jun 2009
    Location
    Odessa, Ukraine
    Posts
    69
    Vote Rating
    0
      0  

    Default

    Yes, I was using 'on'.
    addListener works good.
    But why 'on' isn't just a wrapper for 'addListener'? So I need to override both methods.

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Answers
    1
    Vote Rating
    118
      0  

    Default

    No, 'on' still points to the old 'addListener' implementation.

    You need:
    Code:
    Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •