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

      0  

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

    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
    danh2000 is on a distinguished road

      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
    g2mac is on a distinguished road

      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
    danh2000 is on a distinguished road

      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,505
    Answers
    13
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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
    g2mac is on a distinguished road

      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,505
    Answers
    13
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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,505
    Answers
    13
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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
    g2mac is on a distinguished road

      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
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

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