title: Sencha Touch 2 - switch views
body: <p>I started to use the Sencha Touch 2 MVC, but I can't overcome the problem below.
  I have an Ext.application code:</p>
  
  <pre><code>Ext.application({
      name: 'ProjectName',
      appFolder: APP_URL + "app",
      enableQuickTips: true,
      extend: 'Ext.app.Controller',
      phoneStartupScreen: 'LOGO.png',
  
      controllers: ['Site'],
  
      views: ['Viewport_login', 'Viewport_reg'],
      layout: 'vbox',
  
  
  
      launch: function() {
          //bootstrap
  
          Ext.create("Ext.Container", {
              requires: [
  
              ],
              items: [
                  Ext.create("ProjectName.view.Viewport_login", {}),
                  Ext.create("ProjectName.view.Viewport_reg", {})
  
              ]
          });
  
  
         return true;
  
      }
  
  });
  </code></pre>
  
  <p>view 'Viewport_login' code:</p>
  
  <pre><code>Ext.define('ProjectName.view.Viewport_login', {
      extend: 'Ext.Panel',
  
      requires: [
          'ProjectName.view.Login',
          'ProjectName.view.Header'
      ],
  
  
      fullscreen: true,
  
      initialize: function() {
          console.log("init viewpor_login");
          Ext.create("Ext.Container", {
              //fullscreen: true,
              style: 'background-color: white;',
              layout: 'vbox',
              fullscreen: true,
              scrollable: true,
  
  
              items: [
                  {
                      xtype: 'Bheader'
                  },              
                  Ext.create("widget.login")
              ]
          });
  
          this.callParent();
      }
  
  });
  </code></pre>
  
  <p>View 'Viewpoer_reg' code:</p>
  
  <pre><code>Ext.define('ProjectName.view.Viewport_reg', {
  extend: 'Ext.Panel',
  
  requires: [
      'ProjectName.view.Reg',
      'ProjectName.view.Header'
  ],
  
  
  fullscreen: true,
  
  initialize: function() {
      console.log("init viewpor_reg");
      Ext.create("Ext.Container", {
          //fullscreen: true,
          style: 'background-color: white;',
          layout: 'vbox',
          fullscreen: true,
          scrollable: true,
  
  
          items: [
              {
                  xtype: 'Bheader'
              },  
              Ext.create("widget.reg")
          ]
      });
  
      this.callParent();
  }
  
  });
  </code></pre>
  
  <p>view 'Header' code:</p>
  
  <pre><code>Ext.define('ProjectName.view.Header', {
  extend: 'Ext.Panel',
  alias: 'Bheader',
  xtype: 'Bheader',
  
  requires: [
      'Ext.Img'
  ],
  
  initialize: function() {
      console.log("header inited");
  },
  
  config: {
      cls: 'bg-holder',
      items: [
          Ext.create("Ext.Img", {
              src: BASE_URL + 'assets/images/header3.png',
              height: 35,
              width: "100%",
              style: "background-position: center 0px; "
          })
      ]
  }
  });
  </code></pre>
  
  <p>And finally the 'Site' controller's code:</p>
  
  <pre><code>Ext.define('ProjectName.controller.Site', {
  extend: 'Ext.app.Controller',   
  
  
  config: {
      views: ['Viewport_login', 'Viewport_reg']
  
  },
  
  
  init: function() {
      console.log('Init site controller');
      // Start listening for events on views
  
  
      this.control({
          // example of listening to *all* button taps
          '#login_button': {          
              tap: function () {
  
                  // HOW CAN I SWITCH TO 'VIEWPORT_REG' VIEW?
              } 
          }           
      });
  
  },
  
  renderRegFOrm: function() {
  
  },
  
  onLaunch: function() {
      console.log('onLaunch site controller');
  },
  });
  </code></pre>
  
  <p>First, I have a problem right now: The 'Header' does'nt appear if I load both views ('Viewport_login', 'Viewport_reg') in Container which created in Ext.application launch function. Can anyone help me, why?</p>
  
  <p>Second, in the Controller code you can see the this.control(... section. How can I switch to other view in here?</p>