Sencha touch 2.0 can't set activeitem on viewport
App.view.Viewport.setActiveItem("App.view.user.Index",{
                        type: "slide",
                        direction: "left"
                    });

this.App.view.Viewport.setActiveItem("App.view.user.Index",{
                        type: "slide",
                        direction: "left"
                    });

Uncaught TypeError: Object function () {
                    return this.constructor.apply(this, arguments);
                } has no method 'setActiveItem'

Ext.Loader.setConfig(
{
    enabled: true ,
    paths:{
        //set application path
        App: 'app'
    }

});

// Main application entry point
Ext.application({
    name: 'App',
        //Define all models and controllers in the application
        //Views do not have to be defined these are defined in the controllers

        //Models

        //Controllers
        controllers: ['User'],
        //automatically create a viewport(template) instance/object  app/Viewport.js
        autoCreateViewport: true,
    launch: function() {


    }
});

Ext.define('App.view.Viewport', {
    extend: 'Ext.viewport.Default',
    xtype: "Viewport",


    config: {


        fullscreen:true,
        layout:     "card",
        items:[
            {
                xtype: "panel",
                scrollable:true,
                items: [
                    {
                        xtype:"toolbar",
                        title:"Test app"
                    },
                    {
                        xtype:"UserLoginView",
                        id: "LoginForm"
                    }
                ]
            }
        ]
    }

});

//Define controller name
Ext.define('App.controller.User', {
    //Extend the controller class
    extend: 'Ext.app.Controller',
    views: ['user.Login','user.Index'],
    refs: [
        {
            selector:"#userLogin",
            ref: 'LoginUserLogin'
        },
        {
            selector:"#userPassword",
            ref: "LoginUserPassword"
        },
        {
            selector: "Viewport",
            ref: "Viewport"
        },
        {
            selector: "UserIndex",
            ref: "UserIndex"
        }
    ],
    //define associated views with this controller


    init: function()
    {
        //do something and setup listeners

        //setup listeners
        this.control({
            '#UserLoginButon' : {
                tap : this.login

            }
        });
    },

    //handle
    login : function  (object)
    {
        //iniate loading screen for user
        var loadingScreen = new Ext.LoadMask(Ext.getBody(),{msg: ""});
        loadingScreen.show();


        //get form values
        var username = this.getLoginUserLogin().getValue();
        var password = this.getLoginUserPassword().getValue();

        //check for empty fields
        if(username == "" || password == "")
        {
            loadingScreen.hide();
            Ext.Msg.alert("Foutmelding","Je dient alle velden in te vullen.");
        }
        else
        {
            Ext.Ajax.request(
            {
                url: '../backend/users/login/'+username+'/'+password,
                method: 'post',
                failure : function(response)
                {
                    loadingScreen.hide();
                    data = Ext.decode(response.responseText);
                    Ext.Msg.alert('Login Error', data.errorMessage, Ext.emptyFn);
                },
                success: function(response, opts)
                {
                    data = Ext.decode(response.responseText);

                    if (data == true)
                    {
                        loadingScreen.hide();
                        Ext.Msg.alert("ingelogd!","welkom");

                        //THIS IS WHERE IT GOES WRONG
                        App.view.Viewport.setActiveItem("App.view.user.Index",{
                            type: "slide",
                            direction: "left"
                        });




                    } else
                    {
                        loadingScreen.hide();
                        Ext.Msg.alert("Foutmelding","Gebruikersnaam of wachtwoord klopt niet.");
                    }
                }
            });




        }
         console.log(App);









    },
    loginRequest : function (username, password)
    {

    }



});

Ext.Loader.setConfig({enabled:true});
Ext.application({
        name: 'MyApp',
        controllers: ['MyController'],
        autoCreateViewport: true,
        launch: function() {
            console.log('launch!');
        }
    });

Ext.define('MyApp.view.Viewport', {
extend: 'Ext.Container',
xtype: 'my-viewport',
config: {
    layout: {
        type: 'card',
        animation: {
            type: 'slide',
            direction: 'left'
        }
    },
    fullscreen: true,
    items: [{xtype: 'my-list'}, {xtype: 'my-detail'}]
}
});

Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
views: ['Navbar', 'List', 'Detail'],
init: function() {
    console.log('MyController init');

    this.control({
        'button[go]': {
                tap: function(btn) {
                    viewport = Ext.ComponentQuery.query('my-viewport');
                    target = Ext.ComponentQuery.query(btn.go);
                    viewport[0].setActiveItem(target[0]);
                }
            }
    });
}
});

{
    xtype: 'button',
    text: 'detail view!',
    go: 'my-detail',
    width: '20%'
}

var indexPanel = Ext.create('App.view.user.Index');
Ext.Viewport.add(indexPanel)
Ext.Viewport.setActiveItem(indexPanel)