Search code examples
extjssencha-touchsencha-touch-2sencha-touch-2.1

Set animation to view change - Sencha Touch


I have this code:

backFromPlayers: function(button, e, eOpts) {
    var Dashboard = Ext.create('HTMS.view.Dashboard');
    Ext.Viewport.setActiveItem(Dashboard);
},

As You can see, first I create view called "Dashboard", then I set it as active. Problem is that, I don't understand how to set up animation to setActiveItem method. I can set animation to that view as default, for example:

Ext.define('HTMS.view.Dashboard', {
extend: 'Ext.Container',
alias: 'widget.dashboard',

requires: [
    'Ext.TitleBar',
    'Ext.Button'
],

config: {
    style: 'background: #fff;',
    scrollable: true,
    showAnimation: {
        type: 'slide',
        direction: 'left'
    },
// Rest code

But I need to change direction depending on place where I call "Dashboard" view.


Solution

  • you could use setAnimation to modify the direction, try

    backFromPlayers: function(button, e, eOpts) {
        var Dashboard = Ext.create('HTMS.view.Dashboard');
        var direction = 'right'; //[or] left;
        Ext.Viewport.getLayout().setAnimation({type: 'slide', direction: direction});
        Ext.Viewport.setActiveItem(Dashboard);
    }