You found a bug! We've classified it as TOUCH-5463 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    3
    YuriM is on a distinguished road

      2  

    Default MessageBox cannot be closed under some circumstances.

    Touch version tested:
    • Touch 2.3.1a rev 410, Touch 2.3.0
    Browser versions tested against:
    • Chrome Version 34.0.1847.116
    • Texet Android device
    DOCTYPE tested against:
    • ____
    Description:Steps to reproduce the problem:
    • call "Ext.Msg.alert('test')" in chrome console
    • close dialog
    • goto 1
    The result that was expected:
    • dialog always closed
    The result that occurs instead:
    • after few tries dialog cannot be closed

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    4,003
    Vote Rating
    133
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default

    Thanks for the report! I just tested this against our latest nightly build and this issue appears to have been fixed.

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    3
    YuriM is on a distinguished road

      1  

    Default

    I've found a workaround for this (I cannot just update application to the latest build), if somebody faced with the same issue.
    While debugging I noticed, that activeAnimation is blocking messagebox from closing properly, so the workaround is to force "end" function of that animation (it was not ended correctly, probably because of events).
    Code:
    Ext.override(Ext.MessageBox, {    
        hide:  function() {
            if (this.activeAnimation && this.activeAnimation._onEnd) {
                this.activeAnimation._onEnd();
            }
            return this.callParent(arguments);
        }
    });

  4. #4
    Sencha User
    Join Date
    Jul 2013
    Posts
    9
    Vote Rating
    0
    daxiang28 is on a distinguished road

      0  

    Default

    FWIW, I was getting errors with 2.3.1 using Ext.override (might be b/c it's deprecated) and ended up with this:

    Code:
    Ext.apply(Ext.MessageBox, {
        hide:  function() {
            if (this.activeAnimation && this.activeAnimation._onEnd) {
                this.activeAnimation._onEnd();
            }
            return this.callParent(arguments);
        }
    });
    Steve

  5. #5
    Ext JS Premium Member
    Join Date
    May 2010
    Posts
    4
    Vote Rating
    0
    sing is on a distinguished road

      0  

    Default

    It still occurs in Touch 2.3.2...

  6. #6
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    45
    Vote Rating
    4
    mattkim is on a distinguished road

      0  

    Default

    I'm having the same issue too

  7. #7
    Sencha User
    Join Date
    Feb 2013
    Posts
    26
    Vote Rating
    1
    JustAndrei is on a distinguished road

      1  

    Default

    Here is my fix. The idea is simple: if the animation does not fire the end event, the cleanup code gets called anyway by the timer, in 50 ms + animation duration.

    Code:
    Ext.Component.prototype.animateFn = // or Ext.override( Ext.Component, { animateFn:
        function (animation, component, newState, oldState, options, controller) {
            var me = this;
            if (animation && (!newState || (newState && this.isPainted()))) {
    
    
                this.activeAnimation = new Ext.fx.Animation(animation);
                this.activeAnimation.setElement(component.element);
    
    
                if (!Ext.isEmpty(newState)) {
                    var onEndInvoked = false;
                    var onEnd = function () {
                        if (!onEndInvoked) {
                            onEndInvoked = true;
                            me.activeAnimation = null;
                            controller.resume();
                        }
                    };
    
    
                    this.activeAnimation.setOnEnd(onEnd);
                    window.setTimeout(onEnd, 50 + (this.activeAnimation.getDuration() || 500));
    
    
                    controller.pause();
                }
    
    
                Ext.Animator.run(me.activeAnimation);
            }
        };

  8. #8
    Sencha User
    Join Date
    Apr 2013
    Posts
    7
    Vote Rating
    0
    lovelyhibabe is on a distinguished road

      0  

    Default Here is the fix

    Here is the fix, this might be an issue with css3 prefix.

    Modify the file touch/src/fx/runner/CssTransition.js,and change function 'onTransitionEnd' to:

    Code:
    onTransitionEnd: function(e) {
        var target = e.target,
            id = target.id,
            propertyName = e.browserEvent.propertyName,
            styleDashPrefix = Ext.browser.getStyleDashPrefix();
    
    
        if (id && this.runningAnimationsData.hasOwnProperty(id)) {
            if (Ext.feature.has.CssTransformNoPrefix) {
                if (propertyName.indexOf(styleDashPrefix) >= 0) {
                    propertyName = propertyName.substring(styleDashPrefix.length);
                }
            }
            this.refreshRunningAnimationsData(Ext.get(target), [e.browserEvent.propertyName]);
        }
    }

  9. #9
    Sencha User
    Join Date
    Oct 2012
    Location
    Colombo
    Posts
    5
    Vote Rating
    0
    hashan41 is on a distinguished road

      0  

    Default Here is the fix for Message box cannot close issue

    It occurred for me in several times in Google chrome and Android 4.2.1 Jellybeans native browser,

    Replace this code in Component.js hide function or override it.

    PHP Code:
    hide: function(animation) {
                
    this.setCurrentAlignmentInfo(null);
                
    //patch for message box issue by hashan jayakody
                /*
                if (this.activeAnimation) {
                    this.activeAnimation.on({
                        animationend: function() {
                            this.hide(animation);
                        },
                        scope: this,
                        single: true
                    });
                    this.setHidden(true);
                    return this;
                }
                */
                
    if (!this.getHidden()) {
                    if (
    animation === undefined || (animation && animation.isComponent)) {
                        
    animation this.getHideAnimation();
                    }
                    if (
    animation) {
                        if (
    animation === true) {
                            
    animation 'fadeOut';
                        }
                        
    this.onBefore({
                            
    hiddenchange'animateFn',
                            
    scopethis,
                            
    singletrue,
                            
    args: [animation]
                        });
                    }
                    
    this.setHidden(true);
                }
                return 
    this;
            }, 
    Hope this help to solve this bug and save time. This is my first post in here and I am big lover of this framework.

    Thanks,

  10. #10
    Sencha User
    Join Date
    Apr 2012
    Posts
    37
    Vote Rating
    3
    DonM is on a distinguished road

      2  

    Default

    I went with JustAndrei's fix, and it seems to work great. Thanks for all the suggested fixes everyone.

    EDIT: JustAndrei's fix has an issue with selectfields on tables occassionally. The easiest thing to do for now is disable the showAnimation for Ext.Msg like this:

    Code:
    Ext.Msg.defaultAllowedConfig.showAnimation = false;
    I just put it in launch() in app.js and everything appears to be working now.
    Last edited by DonM; 9 Sep 2014 at 11:46 AM. Reason: Update