title: Sencha Touch - Redirect to another view
body: <p>I am building a Sencha Touch application and struggling with redirecting or changing another view after login. After login i need to take it to Home Page.  But my below <strong><em>code in Login Controller's authenticateUser()not working</em></strong>.</p>
  
  <p>Tried with Ext.Viewport.push(homePanel) , Ext.Viewport.setActiveItem(homePanel) also. But nothing works.</p>
  
  <p><strong>LoginView</strong></p>
  
  <pre><code>Ext.define("Mobile.view.LoginView", {
  extend: "Ext.form.FormPanel",
  alias: "widget.mylogin",
  id: 'loginFormPanel',
  
  config: {
  
  
      name: 'loginform',
      frame: true,
      url: 'login/Authenticate',
      title: 'Login',
      items: [
  
        {
            xtype: 'fieldset',
            itemId: 'LoginFieldset',
            margin: '10 auto 0 auto ',
            title: '',
            items: [
  
                  {
                      //User Name field def
                  },
  
                  {
                      //Pwd Field Def
                  }
              ]
        },
          {
              xtype: 'button',
              id: 'loginButton',           
              text: 'Login',
              action: 'login'
          }
  
      ]
  }
  
  });
  </code></pre>
  
  <p><strong>Login Controller</strong></p>
  
  <pre><code>Ext.define("Mobile.controller.LoginController", {
  extend: "Ext.app.Controller",
  views: ['LoginView', 'HomeView'],
  models: ['UserModel'],
  config: {
      refs: {
          loginForm: "#loginFormPanel"
      },
      control: {
          'button[action=login]': {
              tap: "authenticateUser"
          }
      }
  },
  
  authenticateUser: function (button) {
              loginForm.submit({
              method: 'POST',
              success: function (form, result) {
              //THIS IS NOT WORKING
                  Ext.Viewport.add(Ext.create('Mobile.view.HomeView'));
  
              },
              failure: function (form, result) {                   
                  console.log('Error');
                  Ext.Msg.alert('Check the logic for login and redirect');
              }
          });
         }           
  });
  </code></pre>
  
  <p><strong>Home View</strong></p>
  
  <pre><code>Ext.define('Mobile.view.HomeView', {
  extend: 'Ext.Container',
  id: 'homescreen',
  alias: "widget.homepanel",
   config: {
      layout: {
          type: 'card',
          animation: {
              type: 'flip'
          }
      },
      items: [
          {
              xtype: 'toolbar',
              docked: 'bottom',
              id: 'Toolbar',
              title: 'My App',
              items: [
                  {
                      id: 'settingsBtn',
                      xtype: 'button',
                      iconCls: 'settings',
                      ui: 'plain',
                      iconMask: true
                  }
              ]
          },
          {
              xclass: 'Mobile.view.ActionListView'
          }
      ]
  },
  });
  </code></pre>
  
  <p><strong>App.JS</strong></p>
  
  <pre><code>Ext.application({
  name: "Mobile",
  controllers: ["LoginController", "HomeController"],
  views: ['LoginView', 'HomeView', 'ActionListView'],
  models: ['UserModel', 'OrganizationModel', 'ActionModel'],
  stores: ['OrganizationStore', 'ActionStore'],
  launch: function () {
  
      var loginPanel = Ext.create('Ext.Panel', {
          layout: 'fit',
          items: [
              {
                  xtype: 'mylogin'
              }
          ]
      });
      Ext.Viewport.add(loginPanel);
  }
  
  });
  </code></pre>
  
  <p>Any one have any idea?
  Already referred <a href="https://stackoverflow.com/questions/10944351/load-another-view-after-login-with-sencha-touch-2-0">Load another view after login with sencha touch 2.0</a> . But there is no answer . Please help</p>