not able to change view after login page

[Raj_Singh]

34421
I am new in Sencha Touch 2....
I have created a login page but not able to change my view after login. I have put here my all code please help ...thanks in advance ..

my app.js code is here...


//<debug>
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>


Ext.application({
name: 'hawk',


requires: [
'Ext.MessageBox'
],


views: ['Main','login','home'],


icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/Icon@2x.png',
144: 'resources/icons/Icon~ipad@2x.png'
},

phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',


launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();


// Initialize the main view
Ext.Viewport.add(Ext.create('hawk.view.Main'));
},


onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function() {
window.location.reload();
}
);
}
});


my main.js here.................


Ext.define("hawk.view.Main", {
extend: 'Ext.tab.Panel',
xtype:'mainpanel',
requires: ['Ext.TitleBar'],

config: {
tabBarPosition: 'bottom',

items: [
{
xtype:'loginform'
}

]
}


});


my login.js is here..............


Ext.define('hawk.view.login',{
extend:'Ext.form.Panel',
xtype:'loginform',

requires:[
'Ext.form.FieldSet',
'Ext.field.Email',
'Ext.field.Password'
],

config:{
title:'Login',
iconCls:'user',
url:'Login.php',

items:[{

xtype:'fieldset',
title:'Sign in',

items:[
{
xtype:'emailfield',
name:'email',
label:'Email'

},
{
xtype:'passwordfield',
name:'password',
label:'Password'
}]
},
{
xtype:'button',
text:'Sign in',
ui:'confirm',
handler:function(){

Ext.Ajax.request({
url: 'Login.php',
method: 'post',
params: {UserName: 'user', Password : 'pass'},
failure : function(response){
Ext.Msg.alert('Login Error');
data = Ext.decode(response.responseText);
Ext.Msg.alert('Login Error', data.errorMessage, Ext.emptyFn);
},
success: function(response, opts) {
Ext.Msg.alert('Login succes' );


var notesListContainer = Ext.create('hawk.view.home');
Ext.Viewport.add(notesListContainer);


Ext.Msg.alert('---------' );




}
});



}
}

]
}
})



my home.js is here.......This is test page only which I want show after login .....


Ext.define('hawk.view.home',{
extend: 'Ext.tab.Panel',
xtype:'hamepanel',
config:{
title:'Home',
iconCls:'home',

html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists and forms to create a simple app</p>",
'<h2>Sencha Touch (2.0.0)</h2>'
].join("")

}
});

[mitchellsimoens]

All you have to do is add the home view to the Main class and remove the login.

[Raj_Singh]

I have change like this now .......

my Main.js is look like this...


Ext.define("hawk.view.Main", {
extend:'Ext.form.Panel',
xtype:'mainpanel',


requires:[
'Ext.form.FieldSet',
'Ext.field.Email',
'Ext.field.Password',
'Ext.TitleBar'
],

config:{
title:'Login',
iconCls:'user',
url:'Login.php',

items:[{

xtype:'fieldset',
title:'Sign in',

items:[
{
xtype:'emailfield',
name:'email',
label:'Email'

},
{
xtype:'passwordfield',
name:'password',
label:'Password'
}]
},
{
xtype:'button',
text:'Sign in',
ui:'confirm',
handler:function(){
// this.up('loginform').submit();
//display Loading indicator to user
// loginform.setLoading(true, false);

// var email = Ext.getCmp('email').getValue();
//var pass = Ext.getCmp('password').getValue();
Ext.Ajax.request({
url: 'Login.php',
method: 'post',
params: {UserName: 'user', Password : 'pass'},
failure : function(response){
Ext.Msg.alert('Login Error');
data = Ext.decode(response.responseText);
Ext.Msg.alert('Login Error', data.errorMessage, Ext.emptyFn);
},
success: function(response, opts) {
Ext.Msg.alert('Login succes' );
//viewport[0].setActiveItem(target[0]);

var notesListContainer = Ext.create('hawk.view.home');
Ext.Viewport.add(notesListContainer);


Ext.Msg.alert('---------' );
//Ext.Viewport.setActiveItem('home', 'slide');
/*
data = Ext.decode(response.responseText);
if (data.errorMessage != null)
{
Ext.Msg.alert('Login Error', data.errorMessage, Ext.emptyFn);
mainpanel.setLoading(false);
} else {
//hide the Loading mask
mainpanel.setLoading(false);
//show the next screen
mainpanel.setActiveItem(home, 'slide');
}

*/
}
});



}
}

]
}
})


and now i have remove login.js but still it is not working .....pls help I am totally new...