PDA

View Full Version : select() and each() to add mouse event differ to ext 2.x



ostghost
22 Apr 2009, 4:00 AM
i start to use ext-core-3.0-beta1
have some form labels but same error occures with other elements

purpose of code is on mouse over add and on mouse out remove class - border definition for element

for exeample 30 form inputs with labels

works ok


Ext.each( Ext.getBody().select('label').elements, function(el){
x = Ext.get(el);
x.on('mouseover', function(x){

// gets element form event target
x = Ext.get(x.getTarget());
x.addClass('imageHrefOver');
});
x.on('mouseleave', function(x){
x = Ext.get(x.getTarget());
x.removeClass('imageHrefOver');
});
});

but why next construction add / remove class only to the last element retrieved from Ext.getBody().select('label').elements

mouseover first fith label etc. but highlighted is always the last one.


Ext.each( Ext.getBody().select('label').elements, function(el){
x = Ext.get(el);
x.on('mouseover', function(){
x.addClass('imageHrefOver');
});
x.on('mouseleave', function(){
x.removeClass('imageHrefOver');
});
});

thanks

Animal
22 Apr 2009, 4:20 AM
Why not use Element.hover?

ostghost
22 Apr 2009, 4:37 AM
animal thank you

your solution works like a sharm. why not - i was thinking old fashioned way :D and trying to simulate mouse over mouse out cause hover in my mind was paired as w3c said only on hrefs

so solution is


Ext.select('.imageHref img').hover(function(evt, target){
var elem = Ext.get(target).parent();
elem.addClass('imageHrefOver');
}, function(evt, target){
var elem = Ext.get(target).parent();
elem.removeClass('imageHrefOver');
});