title: Navigation between pages in Sencha MVC approach
body: <p>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:</p>
  
  <pre><code>//&lt;debug&gt;
  Ext.Loader.setPath({
  'Ext': 'sdk/src'
  });
  //&lt;/debug&gt;
  
  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();
          }
      );
  }
  });
  </code></pre>
  
  <p>mainmenu.js:</p>
  
  <pre><code>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: '&lt;div class="journal"&gt;Journal&lt;/div&gt;',
                      labelWidth: '100%',
                      name: '',
                      id:'journal',
                      handler: function() {
                         // iPolis.Viewport.setActiveItem('journalPanel', {type:'slide', direction:'left'});
                      }
  
                  }
  
  
  
              ]
          }
  
  
  
  
  
  
  
      ]
  }
  
  
  
  });
  </code></pre>
  
  <p>Journalsearch.js :</p>
  
  <pre><code>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() {
  
                      }
                  }]
          }
  ]
   }
  });
  </code></pre>
  
  <p>the controller mainmenu.js:</p>
  
  <p>Ext.define('iPolis.controller.mainmenu', {
      extend: 'Ext.app.Controller',</p>
  
  <pre><code>requires: [''],
  
  config: {
      control: {
  
  
          '#journal': {
              tap: 'onJournalTap'
          }
  
  
      }
  },
  
  init: function() {
  
  },
  
  
  onJournalTap: function() {
  
  
      alert('i am clicked');
  
     var a = Ext.getCmp('menuPanel');
    a.setActiveItem(Ext.getCmp('journalPanel'));
  
  }
  
  
  
  });
  </code></pre>