Results 1 to 3 of 3

Thread: Some navigationview animations (cube, fade, slide) break the 'pop' functionality

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2905 in a recent build.
  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default Some navigationview animations (cube, fade, slide) break the 'pop' functionality

    REQUIRED INFORMATION

    Ext version tested:

    • ST 2.0, 2.0.1


    Browser versions tested against:

    • Chrome 18.0.1025.162 m


    Description:

    • navigationview: specifying any of animations: cube, fade, and slide, through a 'layout', breaks the 'back' button's functionality


    Steps to reproduce the problem:

    • For easy defect reproduction, just go to ST docs for navigationview @ http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.View
    • In the first sample activate Code Editor and, in the source code, define a 'fade' animation:
    • Code:
      layout: {type: "card", animation: "fade" }
    • Then go to Live Preview, and try it.


    The result that was expected:

    • 'back' button shall 'pop' the topmost view using the specified animation


    The result that occurs instead:

    • pressing/tapping the 'back' button has no effect


    Test Case:

    Code:
        // animations cube, fade, and slide break the 'back' button function
        // while flip, pop, and scroll don't
        layout: {type: "card", animation: "fade" }
        
        // this, however, works:
        layout: {type: "card", animation: {type: "cube", direction: "left"}}

    HELPFUL INFORMATION

    Work around:

    • Define the animation using an object literal:
      layout: {type: "card", animation: {type: "cube", direction: "left"}}

      This, however, is not possible with SA 2, and you just have to select the subset that works.


    Operating System:

    • Win7 x64

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Thanks for the report.

    Code:
    var view = Ext.create('Ext.NavigationView', {
        fullscreen : true,
    
        layout : { type : 'card', animation : 'fade' },
    
        items : [
            {
                title : 'First',
                items : [
                    {
                        xtype   : 'button',
                        text    : 'Push a new view!',
                        handler : function () {
                            //use the push() method to push another view. It works much like
                            //add() or setActiveItem(). it accepts a view instance, or you can give it
                            //a view config.
                            view.push({
                                title : 'Second',
                                html  : 'Second view!'
                            });
                        }
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    This has been fixed for the next release. The following override should resolve the issue. Please let me know if you still have issues:

    Code:
    Ext.define('Overrides.navigation.Bar', {
        override: 'Ext.navigation.Bar',
    
        animate: function(element, config, callback) {
            var me = this,
                animation;
    
            //reset the left of the element
            element.setLeft(0);
    
            config = Ext.apply(config, {
                element: element,
                easing: 'ease-in-out',
                duration: me.getAnimation().duration || 250
            });
    
            animation = new Ext.fx.Animation(config);
            animation.on('animationend', function() {
                if (callback) {
                    callback.call(me);
                }
            }, me);
    
            Ext.Animator.run(animation);
            me.activeAnimations.push(animation);
        }
    });

    Sencha Inc

    Jamie Avins

    @jamieavins

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •