Sencha Touch 2 "view is not defined" console error - debugging

Question

Trying to have a button push to a different view 'new profile' and 'profile page' (second view) Of course I would have authentication, however just trying to get the views correct before implement the controllers and server side.
Having the following errors:
Uncaught ReferenceError: view is not defined Main.js:116
Uncaught ReferenceError: view is not defined Main.js:126
Google only brings back "ext is not defined" responses.
Forgive the shocking coding as this is my first app for my school assignment (please give feedback how to improve this if possible) I understand that the view needs to be defined, however in the Sencha Touch's API is where I got the information.
Thanks for your time.
var pageFilterGame = {
xtype: 'panel',
title: 'Filter Games',
items: [
{
xtype: 'fieldset',
title: 'Filter games to find the perfect one',
instructions: 'Please fill in atleast one field to start.',
items: [
{
xtype: 'selectfield',
label: 'What enviroment will this game be played in',
options: [
{ text: 'Outside on Grass', value: 'grass' },
{ text: 'Outside on Concrete', value: 'concrete' },
{ text: 'Inside', value: 'inside' }
]
},
{
xtype: 'selectfield',
name: 'equipment',
label: 'What equipment do you have',
options: [{text: 'DB form'}]
},
{
xtype: 'numberfield',
name : 'Player Numbers',
label: 'How many players do you have',
minValue: 2,
maxValue: 50
},
{
xtype: 'numberfield',
name: 'avgname',
label: 'Average age of players',
minValue: 2,
maxValue: 99
},
{
xtype: 'selectfield',
label: 'Sort result by:',
options: [
{ text: 'Highest Rated', value: 'rated' },
{ text: 'Equipment', value: 'equipment' },
{ text: 'Alphabetically', value: 'alpha' }
]
},
],
},
{
xtype: 'button',
ui: 'action',
text: 'Filter Games',
action: '',
maxWidth: '150px'
}
]
};
var pageSearch = {
xtype: 'panel',
title: 'Search',
items: [
{
xtype: 'fieldset',
title: 'Search',
items: [
{
xtype: 'searchfield',
label: 'Search',
name: 'search'
}
]
},
{
xtype: 'button',
ui: 'action',
text: 'Search',
action: '',
maxWidth: '100px'
}
]
};
var pageProfileLogin = {
xtype: 'panel',
title: 'My Profile',
items: [
{
xtype: 'fieldset',
title: 'Please login to access your profile',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
clearIcon: false
}
]
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
text: 'Login',
ui: 'confirm',
handler: function() {
view.push({
title: 'Second View',
padding: 10,
})},
},
{
xtype: 'button',
ui: 'action',
text: 'Create New',
handler: function() {
view.push({
title: 'New Profile',
items: [
{
xtype: 'fieldset',
title: 'Please fill in the form to create your profile',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
clearIcon: false
},
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
],
},
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
text: 'Login',
ui: 'confirm',
},
]
}
]
});
}
},
]
},
]}
var viewTabConfig = {
xtype: 'tabpanel',
styleHtmlContent: true,
title: 'Get Creative!',
items: [pageFilterGame, pageSearch, pageProfileLogin]
};
var viewDef = {
//
// Another new UI element introduced. This UI element allows one to add multiple panels in a 'stacked' like operation. A
// new panel when pushed into the NavigationView will be displayed along with a back button. When the back button is tapped,
// the visible view is 'popped' and the parent view gets displayed again. See demo in the lecture recording.
//
extend: 'Ext.NavigationView',
id: 'navView',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.field.Password',
'Ext.field.Select',
'Ext.field.Number',
'Ext.field.Search',
'Ext.form.FieldSet',
'Ext.tab.Panel',
'Ext.data.Store',
'Ext.data.reader.Xml'
],
config: {
fullscreen: true,
items: [viewTabConfig]
}
};
Ext.define("a2.view.Main", viewDef);

Answer 1

I had to add extra models and view to the app.js file and it worked fine.