title: Sencha Touch 2 xtype not working as expected
body: <p>SO I am building my first Sencha Touch App and I am having a problem with rendering a Panel that I have defined.</p>
  
  <p>Login.js</p>
  
  <pre><code>Ext.define("Blog.view.Login", {
    extend:'Ext.form.Panel',
    requires : ['Ext.form.FieldSet', 'Ext.field.Email', 'Ext.field.Password'],
    xtype: 'loginpanel',
  
    config:{
      scrollable:true,
      title: "Log In",
  
      items:[
        {
          html:"&lt;center&gt;&lt;h1&gt;OkShit&lt;/h1&gt;&lt;/center&gt;",
          styleHtmlContent:true
        },
        {
          xtype:'fieldset',
          items:[
            {
              xtype:'emailfield',
              name:'email',
              placeHolder:'E-Mail'
            },
  
            {
              xtype:'passwordfield',
              name:'password',
              placeHolder:'Password'
            }
          ]
        },
        {
          xtype:'button',
          text:'Log In',
          style:{
            marginBottom:'20px'
          }
        },
        {
          xtype:'button',
          text:'Sign Up'
        }
      ]
    }
  
  });
  </code></pre>
  
  <p>Main.js</p>
  
  <pre><code>Ext.define("Blog.view.Main", {
    extend:'Ext.Container',
  
    config:{
      items:[
        {
          xtype :'loginpanel'
        }
      ]
    }
  });
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>views: ['Main', 'Login'],
  </code></pre>
  
  <p>I did some research already and someone suggested to use </p>
  
  <pre><code>alias: 'widget.loginpanel'
  </code></pre>
  
  <p>I tried it but it still did not work. Does anyone have any solution to this?</p>
  
  <p><strong>EDIT</strong>
  This is what I have right now and it is still not doing anything =(</p>
  
  <pre><code>Ext.define("Blog.view.Login", {
    extend:'Ext.form.Panel',
    alias: 'widget.loginpanel',
    requires : ['Ext.form.FieldSet', 'Ext.field.Email', 'Ext.field.Password'], ...
  </code></pre>