Navigation between pages in Sencha MVC approach - sencha-touch

Question

I am new to sencha touch. I am beginning with MVC pattern. I want to navigate from one page to another. In my controller i have wriiten a tap function. The alert box inside works when tapped but it is not moving to the next screen. I don't know where have i gone wrong. Please do help.
My app.js looks like this:
//<debug>
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>
Ext.application({
name: 'iPolis',
requires: [
'Ext.MessageBox'
],
views: ['Main','mainmenu','journalsearch'],
controllers: [
'mainmenu'
],
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('iPolis.view.Main'));
Ext.Viewport.add(Ext.create('iPolis.view.journalsearch'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function() {
window.location.reload();
}
);
}
});
mainmenu.js:
Ext.define("iPolis.view.mainmenu", {
extend: 'Ext.form.Panel',
requires: ['Ext.TitleBar','Ext.form.FieldSet'],
id:'menuPanel',
config: {
fullscreen:true,
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'iPolis',
items: [
{
//text:'Back',
ui:'back',
icon: 'home',
iconCls: 'home',
iconMask: true,
handler: function() {
iPolis.Viewport.setActiveItem('menuPanel', {type:'slide', direction:'right'});
}
}]
},
{
xtype: 'fieldset',
title: 'Menu',
items: [
{
xtype: 'button',
text: '<div class="journal">Journal</div>',
labelWidth: '100%',
name: '',
id:'journal',
handler: function() {
// iPolis.Viewport.setActiveItem('journalPanel', {type:'slide', direction:'left'});
}
}
]
}
]
}
});
Journalsearch.js :
Ext.define("iPolis.view.journalsearch", {
extend: 'Ext.form.Panel',
requires: ['iPolis.view.mainmenu','Ext.TitleBar','Ext.form.Panel','Ext.form.FieldSet','Ext.Button'],
id:'journalPanel',
config: {
// tabBarPosition: 'bottom',
layout: {
// type: 'card',
animation: {
type: 'flip'
}
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'iPolis',
items: [
{
//text:'Back',
ui:'back',
icon: 'home',
iconCls: 'home',
iconMask: true,
handler: function() {
}
}]
}
]
}
});
the controller mainmenu.js:
Ext.define('iPolis.controller.mainmenu', {
extend: 'Ext.app.Controller',
requires: [''],
config: {
control: {
'#journal': {
tap: 'onJournalTap'
}
}
},
init: function() {
},
onJournalTap: function() {
alert('i am clicked');
var a = Ext.getCmp('menuPanel');
a.setActiveItem(Ext.getCmp('journalPanel'));
}
});

Answer 1

In this function:
onJournalTap: function() {
alert('i am clicked');
var a = Ext.getCmp('menuPanel');
a.setActiveItem(Ext.getCmp('journalPanel'));
}
Try using this command: console.log(a), and show what it logs, I will help you.
PS: basically that's what Ext.NavigationView is designed for. If you have many views and just want to set one ACTIVE view at one time, let's include them all in your container and later show them using setActiveItem(index of that view)