title: Sencha touch 2.0 can't set activeitem on viewport
body: <p>I am playing with sencha touch 2.0 at the moment and i am having the following problem.</p>
  
  <p>I am trying to set the activeitem on my viewport but according to my debug console the function is not being recognized. Yes my layout = card. </p>
  
  <p>Can someone please tell me how i can change my view !</p>
  
  <p>Here's my code</p>
  
  <p>this is where it goed wrong :</p>
  
  <p>//THIS IS WHERE IT GOES WRONG </p>
  
  <pre><code>                    App.view.Viewport.setActiveItem("App.view.user.Index",{
                          type: "slide",
                          direction: "left"
                      });
  </code></pre>
  
  <p>i also tried </p>
  
  <pre><code>this.App.view.Viewport.setActiveItem("App.view.user.Index",{
                          type: "slide",
                          direction: "left"
                      });
  </code></pre>
  
  <p>but that gives the same error: setActiveItem does not exist:</p>
  
  <pre><code>Uncaught TypeError: Object function () {
                      return this.constructor.apply(this, arguments);
                  } has no method 'setActiveItem'
  </code></pre>
  
  <p><strong>The rest of the code if needed : App.js</strong> </p>
  
  <pre><code>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() {              
  
  
      }
  });
  </code></pre>
  
  <p><strong>Viewport</strong></p>
  
  <pre><code>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"
                      }
                  ]
              }
          ]
      }
  
  });
  </code></pre>
  
  <p><strong>Controller where everything is happening</strong></p>
  
  <pre><code>//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)
      {
  
      }
  
  
  
  });
  </code></pre>