SO I am building my first Sencha Touch App and I am having a problem with rendering a Panel that I have defined.

Login.js

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:"<center><h1>OkShit</h1></center>",
        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'
      }
    ]
  }

});

Main.js

Ext.define("Blog.view.Main", {
  extend:'Ext.Container',

  config:{
    items:[
      {
        xtype :'loginpanel'
      }
    ]
  }
});

app.js

views: ['Main', 'Login'],

I did some research already and someone suggested to use

alias: 'widget.loginpanel'

I tried it but it still did not work. Does anyone have any solution to this?

EDIT This is what I have right now and it is still not doing anything =(

Ext.define("Blog.view.Login", {
  extend:'Ext.form.Panel',
  alias: 'widget.loginpanel',
  requires : ['Ext.form.FieldSet', 'Ext.field.Email', 'Ext.field.Password'], ...

• sencha-touch
• extjs
• sencha-touch-2

Basically, it's not really necessary to use alias because you've already defined that class and registered it with a xtype in Sencha Touch 2.

Which browser are you using? Please see if there are any errors logged in browser debugger and paste here. I will try to help you out.