[4.1.0] Element.ghost doesn't work if it is called with listeners

**Daniil** · 7 May 2012 5:54 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.0

Browser versions tested against:

IE9
Chrome 18
FF 12

DOCTYPE tested against:

Any

Description:

The Element.ghost doesn't work if it is called with "afteranimate" listener. I think it won't work with any listener as well, because it overrides the internal "beforeanimate" listener which, strictly speaking, does the animation.

Steps to reproduce the problem:

Run the page
Click the "ghost with 'afteranimate' listener" Button.

The result that was expected:

I expect the element to be hidden with ghost animation effect.

The result that occurs instead:

The element is not hidden and no animation.

Test Case:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ghost Bug</title>

    <link type="text/css" rel="stylesheet" href="resources/css/ext-all.css" />
    
    <script type="text/javascript" src="ext-all.js"></script>

    <style type="text/css">
        .my-div {
            position: absolute;
            left: 100px;
            top: 100px;
            height: 200px;
            width: 200px;
            background-color: green;
        }
    </style>

    <script type="text/javascript">        
        Ext.onReady(function () {
            Ext.create("Ext.button.Button", {
                renderTo  : Ext.getBody(),
                text      : "show the div",
                listeners : {
                    click : {
                        fn : function () {
                            var el = Ext.get("my-div");
                            el.show();
                        }
                    }
                }
            });

            Ext.create("Ext.button.Button", {
                renderTo  : Ext.getBody(),
                text      : "ghost without any listeners",
                listeners : {
                    click : {
                        fn : function () {
                            var el = Ext.get("my-div");
                            el.ghost("tr");
                        }
                    }
                }
            });

            Ext.create("Ext.button.Button", {
                renderTo  : Ext.getBody(),
                text      : "ghost with 'afteranimate' listener",
                listeners : {
                    click : {
                        fn : function () {
                            var el = Ext.get("my-div");
                            el.ghost("tr", {
                                listeners : {
                                    afteranimate : function () {
                                        alert("afteranimate");
                                    }
                                }
                            });
                        }
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div id="my-div" class="my-div">
    </div>
</body>
</html>

HELPFUL INFORMATION

Debugging already done:

The problem lies at the end of the ghost method.

Code:

me.animate(Ext.applyIf(obj || {}, {
    duration: 500,
    easing: 'ease-out',
    listeners: {
        beforeanimate: {
            fn: beforeAnim
        }
    }
}));

If you'd pass any "listeners" via the "obj" parameter, it will override the internal "beforeanimate" listener which, strictly speaking, does the animation.

Possible fix:

I think the custom listeners should not override the internal "beforeanimate" listener. Also, if there is a "beforeanimate" listener, it should be executed before the internal "beforeAnim". Here is the possible fix (in haste), please see the comments.

Code:

Ext.dom.Element.override({
    ghost: function(anchor, obj) {
        var me = this,
            beforeAnim;

        anchor = anchor || "b";
        beforeAnim = function() {
            var width = me.getWidth(),
                height = me.getHeight(),
                xy = me.getXY(),
                position = me.getPositioning(),
                to = {
                    opacity: 0
                };
            switch (anchor) {
                case 't':
                    to.y = xy[1] - height;
                    break;
                case 'l':
                    to.x = xy[0] - width;
                    break;
                case 'r':
                    to.x = xy[0] + width;
                    break;
                case 'b':
                    to.y = xy[1] + height;
                    break;
                case 'tl':
                    to.x = xy[0] - width;
                    to.y = xy[1] - height;
                    break;
                case 'bl':
                    to.x = xy[0] - width;
                    to.y = xy[1] + height;
                    break;
                case 'br':
                    to.x = xy[0] + width;
                    to.y = xy[1] + height;
                    break;
                case 'tr':
                    to.x = xy[0] + width;
                    to.y = xy[1] - height;
                    break;
            }
            this.to = to;
            this.on('afteranimate', function () {
                if (me.dom) {
                    me.hide();
                    me.clearOpacity();
                    me.setPositioning(position);
                }
            });
        };

        //beginning of the fix
        if (obj && obj.listeners) {
            if (obj.listeners.beforeanimate) {
                obj.listeners.beforeanimate.fn = Ext.Function.createSequence(obj.listeners.beforeanimate.fn, beforeAnim);
            } else {
                obj.listeners.beforeanimate = {
                    fn : beforeAnim
                }
            }
        }
        //end of the fix

        me.animate(Ext.applyIf(obj || {}, {
            duration: 500,
            easing: 'ease-out',
            listeners: {
                beforeanimate: {
                    fn: beforeAnim
                }
            }
        }));
        return me;
    }
});

Operating System:

Windows 7 Home Premium

**mitchellsimoens** · 7 May 2012 12:52 PM

Thank you for the report

**Daniil** · 9 Oct 2012 8:49 AM

Hi Mitchell,

Could you clarify is there any time frame for fixing this issue?

**wolcott** · 7 Mar 2013 6:53 AM

Any update on this issue?

**Daniil** · 29 Apr 2013 9:21 PM

The issue is still alive. Moreover, there are more problems with the animation methods. Here is a bug report.
http://www.sencha.com/forum/showthread.php?262510

[4.1.0] Element.ghost doesn't work if it is called with listeners

Thread Tools

Search Thread

Display

[4.1.0] Element.ghost doesn't work if it is called with listeners

[4.1.0] Element.ghost doesn't work if it is called with listeners