Difficulty in creating a form

[raiworld81]

Hi all,
I'm trying to create a simple login form with two toolbars, docked with a 'top' and the other with docked 'bottom' and a central panel.
When you render this form, the central panel with a docked toolbar overlaps the'bottom'. I can not figure out where mistake.



Ext.define('Ext.FrontEnd.Login', {
extend: 'Ext.Panel',
alias: 'FrontEnd.Login',
xtype: 'login',
config: {
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Login',
items: [{ xtype: 'spacer' },
{
xtype: 'button',
ui: 'decline',
iconCls: 'delete',
iconMask: true,
handler: function() { this.destroy(); },
scope: this
}
]
},
{
docked: 'bottom',
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Submit',
iconMask: true,
ui: 'plain',
handler: this.EventClickBtnSubmit,
scope: this
}
]
},
{
xtype: 'container',
items: [{
xtype: 'fieldset',
defaults: {
required: true
},
items: [{
xtype: 'textfield',
label: this.fieldLabelUser
},
{
xtype: 'passwordfield',
label: this.fieldLabelPassword
}
]
]
}
]
},
constructor: function(params) {
config = params || {};


Ext.applyIf(config, params);


this.callParent(arguments);
},
initialize: function() {
this.callParent(arguments);
this.show();
}
});

[mitchellsimoens]

This works fine for me:


Ext.define('Ext.FrontEnd.Login', {
extend: 'Ext.Panel',
xtype: 'login',
config: {
fullscreen : true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Login',
items: [{ xtype: 'spacer' },
{
xtype: 'button',
ui: 'decline',
iconCls: 'delete',
iconMask: true,
handler: function() { this.destroy(); },
scope: this
}
]
},
{
docked: 'bottom',
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Submit',
iconMask: true,
ui: 'plain',
handler: this.EventClickBtnSubmit,
scope: this
}
]
},
{
xtype: 'container',
items: [{
xtype: 'fieldset',
defaults: {
required: true
},
items: [{
xtype: 'textfield',
label: this.fieldLabelUser
},
{
xtype: 'passwordfield',
label: this.fieldLabelPassword
}]
}]
}
]
}
});

I added fullscreen to render the login, removed alias as you were using it wrong, constructor and initialize were removed as you didn't need them. One last thing to point out, you shouldn't use the Ext namespace, you should use one that is for your app.

[raiworld81]

Hello,
thanks foryour answer,butusing the codeyou have entered, I can notsee thebottom toolbar withdocked.
If it can be of help, instances of the component login as follows:


Ext.application({
name: 'Sencha',
launch: function() {
Ext.create('FrontEnd.Login');
}
});