Help with ext.form.panel

[nmngu]

I want to create a login screen when my app start and here my code:

Ext.define("WebStore.view.Main", {
extend: 'Ext.Container',
//requires: ['Ext.form.FieldSet','Ext.field.Email','Ext.field.Password'],
xtype: 'mainform',
config: {

items: [
{
xtype: 'loginform',
}
]
}
});


Ext.define("WebStore.view.Login", {
extend: 'Ext.Container',
requires: ['Ext.form.FieldSet','Ext.field.Email','Ext.field.Password'],
xtype: 'loginform',
config: {


url: 'user.php',
centered: true,
items: [
{
xtype: 'fieldset',
title: 'Welcome',
name: 'Log in',
instructions: 'Enter email and password.',
items: [
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
},
{
layout: 'hbox',
//centered: true,
items: [

{
xtype: 'button',
text: 'Log in',
ui: 'confirm',
handler: function(){
this.up('loginform').submit();
}
},
{
xtype: 'spacer',
},
{
xtype: 'button',
text: 'Register',
ui: 'confirm',
handler: function(){
this.up('loginform').submit();
}
}
]
}
]
}
});


But the submit function not work. I figure out that i need to chang Ext.Container to Ext.form.Panel but when i do that my app not run.
I'm a newbie can someone help me fix that please!

[mitchellsimoens]

What do you mean your app will not run when you change from Ext.Container to Ext.form.Panel? Did you inspect the DOM to see if things are rendered just sizes are wrong?