title: Switch view with ExtJS
body: <p>It looks pretty easy but I'm unable to do it. I want to change the view after click on login button, this is my code:</p>
  
  <p>app.js</p>
  
  <pre><code>Ext.require ('Ext.container.Viewport');
  Ext.application({
    name: 'MyApp',
    appFolder: 'app',
    views: [
      'Login',
      'Main'
    ],
    controllers:[
      'Login'
    ],
    launch: function() {
      Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{
          xtype: 'loginView'
        }]
      });
    }
  });
  </code></pre>
  
  <p>Login.js (View)</p>
  
  <pre><code>Ext.define('MyApp.view.Login' ,{
    extend: 'Ext.panel.Panel',
    alias : 'widget.loginView',
  
    title: 'MyApp',
    layout: {
      type: 'hbox',
      pack: 'center',
      padding: 50
    },
    defaults: {
      border: false,
      width: 400,
      height: 400
    },
    items: [{
      xtype: 'panel',
      html: '&lt;img src="resources/img/img.jpg" /&gt;'
    }, {
      xtype: 'loginForm'
    }]
  });
  
  Ext.define('MyApp.view.LoginForm', {
    extend: 'Ext.form.Panel',
    alias: 'widget.loginForm',
    title: 'PSSP',
    bodyPadding: 5,
    layout: 'anchor',
    fieldDefaults: {
      labelAlign: 'top',
      labelWidth: 100,
      labelStyle: 'font-weight:bold'
    },
    defaults: {
      anchor: '100%',
      margins: '0 0 10 0',
      allowblank: false,
      xtype: 'textfield',
    },
    items: [{
      fieldLabel: 'User',
      name: 'username',
      itemId: 'username',
    }, {
      fieldLabel: 'Password',
      name: 'password',
      itemId: 'password',
      inputType: 'password',
    }],
    buttons:[{
      text: 'Login',
      listeners: {
        click: function() {
          var username = this.up('form').down('#username').getValue();
          var password = this.up('form').down('#password').getValue();
          this.fireEvent('login', username, password);
          //Ext.Msg.alert('Datos', 'User: ' + username + '&lt;br&gt;Password: ' + password);
        }
      }
    }]
  });
  </code></pre>
  
  <p>Login.js (Controller)</p>
  
  <pre><code>Ext.define('MyApp.controller.Login', {
    extend: 'Ext.app.Controller',
    init: function() {
      this.control({
        'loginView button': {
          login: this.loginUser
        }
      });
    },
    loginUser: function(username, password) {
      // check if the username and password is valid
      Ext.create('Ext.container.Viewport', {
        items:[{
          xtype: 'mainView'
        }]
      });
    }
  });
  </code></pre>
  
  <p>Main.js (View)</p>
  
  <pre><code>Ext.define('MyApp.view.Main' , {
    extend: 'Ext.container.Viewport',
    alias : 'widget.mainView',
  
    layout: 'border',
    items: [{
      region: 'north',
      title: 'MyApp'
    }, {
      region: 'west',
      width: 250,
      html: 'WEST'
      //xtype: 'westView'
    }, {
      region: 'east',
      width: 250,
      html: 'EAST'
      //xtype: 'eastView'
    }, {
      region: 'center',
      html: 'CENTER'
      //xtype: 'centerView'
    }]
  });
  </code></pre>
  
  <p>What I have to change to load MainView when I click on login button??? Now, when I click on it, Chrome shows this error:</p>
  
  <blockquote>
    <p>Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. </p>
  </blockquote>
  
  <p>What's wrong in my code?</p>
  
  <p>Thanks!</p>