PDA

View Full Version : Help understanding scope resolution



Musical Shore
18 Dec 2009, 1:26 PM
Hi,

I am writing code for a navigation menu. When the mouse hovers over an element, a class should be added to it to make a submenu visible. Here is my code:


Ext.onReady(function() {
Ext.each(Ext.query('#top_nav .primaryli'), function(li){
var el = Ext.get(li);
el.hover(function() {Ext.fly(this).addClass('over');},function() {Ext.fly(this).removeClass('over');});
});
});


The above code works. What I don't understand is why the following code doesn't work:


Ext.onReady(function() {
Ext.each(Ext.query('#top_nav .primaryli'), function(li){
var el = Ext.get(li);
el.hover(function() {this.addClass('over');},function() {this.removeClass('over');});
});
});



Don't "this" and "Ext.fly(this)" point to the same Element object?

crysfel
18 Dec 2009, 1:41 PM
the "this" is the DOM element, if you want to use the methods of the "Ext.Element" class you need to wrap your DOM element first.

Ext.get(domElement); or Ext.fly(domElement);

Musical Shore
18 Dec 2009, 1:56 PM
OK, thanks!