[OPEN] [#34] Notification showFx/hideFx Issues

  1. #1

    [OPEN] [#34] Notification showFx/hideFx Issues

    Have you noticed that several of the ShowFx and HideFx options are working differently between v1.2 and v2.0 with Notifications?

    Basic Align -> Top Right uses SlideIn in its ShowFx. In slides from top right in v1.2, but slides from bottom left in V2.0
    Basic Align -> Top Right uses Ghost in its HideFx. In ghosts in v1.2, but just disappears in V2.0

    There are other issues also, but just wanted to see if you knew of these issues. Tested in both IE 9 and Chrome 18.
    Last edited by Baidaly; Nov 17, 2012 at 12:30 AM.
  2. #2
    Hi,

    Quote Originally Posted by cwolcott View Post
    Basic Align -> Top Right uses SlideIn in its ShowFx. In slides from top right in v1.2, but slides from bottom left in V2.0
    I have reported it to ExtJS. I would consider it a bug.
    http://www.sencha.com/forum/showthre...354#post795354

    Quote Originally Posted by cwolcott View Post
    Basic Align -> Top Right uses Ghost in its HideFx. In ghosts in v1.2, but just disappears in V2.0
    I will investigate it as well.

    Thanks for the reports.
  3. #3
    Quote Originally Posted by Daniil View Post
    Basic Align -> Top Right uses SlideIn in its ShowFx. In slides from top right in v1.2, but slides from bottom left in V2.0

    I have reported it to ExtJS. I would consider it a bug.
    http://www.sencha.com/forum/showthre...354#post795354
    I see that ExtJS have said "You found a bug! We've classified it as EXTJSIV-6137".

    I assume you are still looking at:
    Basic Align -> Top Right uses Ghost in its HideFx. In ghosts in v1.2, but just disappears in V2.0
  4. #4
    Quote Originally Posted by cwolcott View Post
    I assume you are still looking at:
    Basic Align -> Top Right uses Ghost in its HideFx. In ghosts in v1.2, but just disappears in V2.0
    Yes, you are right, I've just investigated the problem.

    I think there is also a bug.
    http://www.sencha.com/forum/showthread.php?202531

    I was able to fix it, please see the example below. But we'd prefer to wait the permanent fix from ExtJS. So, please use the following fix for now.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript">
            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;
                }
            });
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <ext:Button runat="server" Text="Notify">
            <Listeners>
                <Click Handler="Ext.net.Notification.show({
                                    hideFx : {
                                        fxName   : 'ghost',
                                        args : ['tr']
                                    }
                                });" />
            </Listeners>
        </ext:Button>
    </body>
    </html>
  5. #5
    The "slideIn" bug has been fixed in ExtJS.

    It is already included into the 2.1 branch.

    The "ghost" bug has not been fixed yet. I will monitor.
  6. #6
    Looks like the ghosting issue is still a problem. Can you prepend this thread as [OPEN] since we are waiting on Sencha.
  7. #7
    I made an update. Hopefully, Sencha will answer something.

    Tagged [OPEN].
  8. #8
    Opened an Issue to track this defect, see

    https://github.com/extnet/Ext.NET/issues/34
  9. #9
    Bumped on Sencha to try and determine status ...

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

Similar Threads

  1. Can we use this script for Notification??
    By gayancc in forum 1.x Help
    Replies: 0
    Last Post: Jan 15, 2011, 2:00 AM
  2. Notification Issue.
    By NishaLijo in forum 1.x Help
    Replies: 1
    Last Post: Jan 14, 2011, 11:08 AM
  3. Ext:notification
    By vali1993 in forum 1.x Help
    Replies: 0
    Last Post: Mar 16, 2010, 10:40 AM
  4. Ext.Notification via Javascript
    By rthiney in forum 1.x Help
    Replies: 2
    Last Post: Dec 19, 2009, 3:30 PM
  5. Ext. Notification
    By sharif in forum 1.x Help
    Replies: 2
    Last Post: Jun 19, 2009, 11:33 AM

Posting Permissions