1. #11
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
    lasseok is on a distinguished road

      0  

    Default


    I suppose you're refering to this line:

    Code:
    img = e.getTarget.child('img');
    Didn't catch that earlier. The closest I get is this:

    Code:
    img = e.getTarget(false,false,true).child('img'); //getTarget() alone returns the DOM element
    But in that scenario, img is logged as null. What I'm I missing?

  2. #12
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    OK, I made another mistake!

    The Element.down() and Element.child() methods have swapped places in 4.0

    down() means find a descendant node at any depth, child() means an immediate child. So you in fact need down('img')

  3. #13
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
    lasseok is on a distinguished road

      0  

    Default


    It happens

    But, even with the modified code, we're kind of back at the beginning:

    Code:
    var img;
        Ext.select('.options').on('mouseenter', function(e){
            img = e.getTarget(false,false,true).down('img');
            console.log(img);
            if(img != null){
                img.setOpacity(1, {
                    duration: 500,
                    easing: 'easeIn',
                });
            }
        }).on('mouseleave', function(e){
            if(img != null){
                img.setOpacity(0, {
                    duration: 500,
                    easing: 'easeIn',
                });
            }
        });
    This code works, but if I mouse over the a-wrapped img tag, it fades away.

  4. #14
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    I added this code to the end of the setup function in examples/view/data-view.js

    Code:
        var img;
        p.body.on('mouseenter', function(e){
            img = Ext.fly(e.getTarget()).down('img');
            img.animate({
                to: {
                    opacity: 1
                }
            });
        }).on('mouseleave',function(){
            img.animate({
                to: {
                    opacity: 0
                }
            });
        });
    (I assigned the new Panel to the var p in the previous statement of course!)

    And then mouseleave the Panel fades the first image out. Mouseentering it fades it in again.

  5. #15
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
    lasseok is on a distinguished road

      0  

    Default


    Yup, works like a charm!


    Thank you very much.

  6. #16
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
    lasseok is on a distinguished road

      0  

    Default


    I did some more testing and it looks like things aren't entirely as they should be in your example.

    If I load the DataView example with your modifications to the code and then mouseenter the panel from outside the the bottom left corner and onto fx. zacks_grill.jpg, I get an "img is null" error.

    Same thing happens if I just randomly move the mouse over the images in the example.

    Sometimes, it'll fade away the image that I mouseenter together with the Ext.fly(e.getTarget()).down('img'); image.

    Is that still due to a bug or is it the code that select the image that needs to be adjusted?

  7. #17
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    That's just that example. If you mouseenter quickly enough, the target of the mouseover (mouseenter is a fake event triggered by a DOM mouseover event) will be the image, and so .down('img') from there won't get anything.

    I suppose it should test whether the target is an img, and only go down into it to look for an img if it is not.

  8. #18
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    So maybe

    Code:
        var img;
        p.body.on('mouseenter', function(e){
            var t = e.getTarget();
            img = t.tagName.toLowerCase() === 'img' ? Ext.get(t) : Ext.fly(t).down('img');
            img.animate({
                to: {
                    opacity: 1
                }
            });
        }).on('mouseleave',function(){
            img.animate({
                to: {
                    opacity: 0
                }
            });
        });

Similar Threads

  1. How to fade in a window
    By jaques in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 2 Jul 2010, 12:20 PM
  2. FX fade in IE8
    By pkli in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 4 Apr 2010, 1:01 AM

Thread Participants: 1

Tags for this Thread