1. #1
    Sencha User dobie_'s Avatar
    Join Date
    Sep 2011
    Location
    Seattle, WA
    Posts
    47
    Vote Rating
    0
    dobie_ is on a distinguished road

      0  

    Default Answered: setActiveItem direction

    Answered: setActiveItem direction


    I have a container with a card layout set up with the sliding animation. Every time I call setActiveItem() on it, it slides left. I'd like it to reverse the slide animation depending on which child I'm looking at. Otherwise the app feels a little disorienting.

    How do I do that? This isn't working for me:
    Code:
    Ext.getCmp('application').setActiveItem('mainCard', {direction: 'right'});

  2. Try something like this (this is how Ext.tab.Panel does it):

    Code:
    Ext.create('Ext.Container', {
        fullscreen : true,
        layout     : {
            type      : 'card',
            animation : {
                type      : 'slide',
                direction : 'left'
            }
        },
        items      : [
            {
                xtype  : 'toolbar',
                docked : 'top',
                items  : [
                    {
                        text    : 'Go to first',
                        handler : function(btn) {
                            var cnt = btn.up('container[fullscreen=true]');
    
                            cnt.getLayout().getAnimation().setReverse(false);
    
                            cnt.setActiveItem(1);
                        }
                    },
                    {
                        text    : 'Go to second',
                        handler : function(btn) {
                            var cnt = btn.up('container[fullscreen=true]');
    
                            cnt.getLayout().getAnimation().setReverse(true);
    
                            cnt.setActiveItem(0);
                        }
                    }
                ]
            },
            {
                html : 'One'
            },
            {
                html : 'Two'
            }
        ]
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    Answers
    3564
    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


    Try something like this (this is how Ext.tab.Panel does it):

    Code:
    Ext.create('Ext.Container', {
        fullscreen : true,
        layout     : {
            type      : 'card',
            animation : {
                type      : 'slide',
                direction : 'left'
            }
        },
        items      : [
            {
                xtype  : 'toolbar',
                docked : 'top',
                items  : [
                    {
                        text    : 'Go to first',
                        handler : function(btn) {
                            var cnt = btn.up('container[fullscreen=true]');
    
                            cnt.getLayout().getAnimation().setReverse(false);
    
                            cnt.setActiveItem(1);
                        }
                    },
                    {
                        text    : 'Go to second',
                        handler : function(btn) {
                            var cnt = btn.up('container[fullscreen=true]');
    
                            cnt.getLayout().getAnimation().setReverse(true);
    
                            cnt.setActiveItem(0);
                        }
                    }
                ]
            },
            {
                html : 'One'
            },
            {
                html : 'Two'
            }
        ]
    });
    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.

Thread Participants: 1

Tags for this Thread