Sencha Touch - Redirect to another view - extjs

Question

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 code in Login Controller's authenticateUser()not working.
Tried with Ext.Viewport.push(homePanel) , Ext.Viewport.setActiveItem(homePanel) also. But nothing works.
LoginView
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'
}
]
}
});
Login Controller
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');
}
});
}
});
Home View
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'
}
]
},
});
App.JS
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);
}
});
Any one have any idea?
Already referred Load another view after login with sencha touch 2.0 . But there is no answer . Please help

Answer 1

You need create a ref for your HomeView:
refs: {
HomeView: {
autoCreate: true,
selector: 'HomeView',
xtype: 'HomeView'
},
}
And set this view active:
Ext.Viewport.setActiveItem(this.getHomeView());

Answer 2

If you use Sencha Touch 2, you should use Route to redirect to another page. So, it wil be like this:
this.redirectTo('home');
Then create a controller with has a route "home"
FOr more information about routes. http://docs.sencha.com/touch/2-0/#!/guide/controllers-section-4

Answer 3

Try this. may be this work.
authenticateUser: function (button) {
loginForm.submit({
method: 'POST',
success: function (form, result) {
var home= Ext.create('Mobile.view.HomeView');
Ext.getCmp('loginFormPanel').destroy();
Ext.Viewport.add(paneltab);
}