1. #1
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Ostrava, Czech Republic
    Posts
    43
    Vote Rating
    2
    ostghost is on a distinguished road

      0  

    Question select() and each() to add mouse event differ to ext 2.x

    select() and each() to add mouse event differ to ext 2.x


    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

    Code:
    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.

    Code:
    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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Why not use Element.hover?

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Ostrava, Czech Republic
    Posts
    43
    Vote Rating
    2
    ostghost is on a distinguished road

      0  

    Thumbs up good tip

    good tip


    animal thank you

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

    so solution is

    Code:
      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');
        });

Thread Participants: 1