Sencha Touch XType

[adamantinex]

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>Ok</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'      }    ]  }});

Home.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?

I have posted this on stackoverflow as well. The code is better formatted there

http://stackoverflow.com/questions/1...ng-as-expected

[JRS]

In your app.js

 launch: function(){
Ext.Viewport.add(Ext.create('Blog.view.Main'));
}

I'm still learning - so it's just a guess on my part.
Hope this help
JRS

[adamantinex]

In your app.js

 launch: function(){
Ext.Viewport.add(Ext.create('Blog.view.Main'));
}

I'm still learning - so it's just a guess on my part.
Hope this help
JRS

Thanks for the help. I already have that actually inside my app.js

[JRS]

Are you getting any errors in your browser console?

[adamantinex]

Are you getting any errors in your browser console?

I do not see any errors =(

[JackThor]

When defining your panel add fullscreen: true after scrollable: true. That way it will render it to your screen. You you don't want it to take the full space then explicitly define the height and width fo your panel.

[nodohoung]

Because you defined the class 'Blog.view.Main' in the file 'Home.js' instead of 'Main.js' so Sencha couldn't load the file 'Main.js' as you declared in the app.js "views: ['Main', 'Login']". Rename Home.js to Main.js to resolve that problem