Unable to slide view in right direction

[Winnie Lam]

In app.js, I create a viewport with card layout.

Ext.application({
    name: 'App',  
    model: ['Page','ShopInfo'],
    controllers: ['Home'],    
    launch: function() {                  
        var viewport = Ext.create('Ext.Panel', {
            id: 'my-viewport',
            fullscreen: true,
            layout: {
                type: 'card',
                animation: { type: 'slide', direction: 'left' }
            },
            items: [
                { xtype: 'home' }
            ]
});


    }
});

And in the controller, whenever the button is clicked, i want it to go to the homepage.
Please help with the following lines. Why the first one work, but the second one doesn't work? I want it slide to right. If I remove the animation type in app.js, nothing appeared.

'button[go]' : {
                tap: function(btn) {
                    viewport = Ext.ComponentQuery.query('#my-viewport');
                    target = Ext.ComponentQuery.query(btn.go);
                    
                    viewport[0].getLayout().setAnimation({type: 'slide', direction: 'right'}); //first 
                    viewport[0].setActiveItem(target[0],{type: 'slide', direction: 'right'}); //second
                }
            }

[rdougan]

In PR2, setActiveItem does not support the second argument specifying the animation type.