Sencha touch 2.0 kann nicht festgelegt werden, activeitem auf viewport

Spiele ich mit sencha touch 2.0 im moment, und ich bin mit dem folgenden problem.

Ich bin versucht, in der activeitem auf meinem viewport aber laut meiner debug-Konsole die Funktion wird nicht erkannt. Ja, mein layout = Karte.

Kann mir bitte jemand sagen wie ich das ändern kann, meine Ansicht !

Hier ist mein code

dies ist, wo es goed falsch :

//DIES IST, WO ES SCHIEF GEHT

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

ich habe auch versucht

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

aber das gibt den gleichen Fehler: setActiveItem nicht vorhanden:

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

Der rest des Codes, falls benötigt : App.js

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() {              


    }
});

Viewport

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"
                    }
                ]
            }
        ]
    }

});

Controller, wo alles passiert

//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)
    {

    }



});