1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    11
    Vote Rating
    0
    michaelmld08 is on a distinguished road

      0  

    Default Unanswered: animate active item help

    Unanswered: animate active item help


    Hi guys so I have a panel form with a map and details tab. I have a list on the side and each time i click a list item my panel switches to the details tab. Also i can click next on the details page to go to the next page of details, but what i have done is just update a details template with the data of the next item. So it is just really a details template that gets updated with data. What I want tho is each time i click Next for it to have some type of animation to the "next page" . So i am just trying to fake a transition to a imaginary fake page.


    I have coded this in my next button function
    this.getDetails().animateActiveItem(this.getDetails(), this.slideRightTransition);
    and this outside of the function
    slideRightTransition: { type: 'slide', direction: 'right' }


    The transition is really ugly and I get these two errors, any tips?
    • [COLOR=red !important]Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3 Default.js:417[/COLOR]

    • [COLOR=red !important]Uncaught RangeError: Maximum call stack size exceeded[/COLOR]

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Toronto, Canada
    Posts
    92
    Answers
    20
    Vote Rating
    12
    iSmartDevice is on a distinguished road

      0  

    Default


    I'm not sure what causes the errors you have. I set the animation transition to a layout object in a container when I switch views. Hope it helps you.
    Code:
    Ext.define('YourApp.controller.Account', {
        extend: 'Ext.app.Controller',
    
    
    	requires: [
    		'YourApp.view.account.LoginForm',
    	],
    
            config: {
                refs: {
                    loginForm: 'loginForm',
                }
            },
    
         switchView: function() {
            // this.getLoginForm().animateTo('right');
            this.getLoginForm().animateTo('left');
            this.getLoginForm().setActiveItem(1);
        }
    }
    
    
    Ext.define('YourApp.view.account.LoginForm',{
        extend: 'Ext.Panel',
        xtype: 'loginForm',
    	
        requires:[
    		'Ext.field.Email',
    		'Ext.field.Password'
        ],
    
        config:{
            layout: 'card',	activeItem:0,
            items:[
                { xtype:'panel' },
                { xtype:'panel' },
                { xtype:'panel' },
            ]
        },
    
    
        animateTo: function(dir) {
            this.getLayout().setAnimation({
                duration: 250,
                easing: 'ease-in-out',
                type: 'slide',
                direction: dir
            });
        }
    
    });

  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    We don't have this issue either. Can you post a Simple example reproducing this?