You found a bug! We've classified it as EXTJS-6150 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      1  

    Default [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


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,047
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thank you for the report
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Hi Mitchell,

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

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Location
    Washington DC
    Posts
    7
    Vote Rating
    0
    wolcott is on a distinguished road

      0  

    Default


    Any update on this issue?

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    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
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Thread Participants: 2