PDA

View Full Version : Difficulty in creating a form



raiworld81
16 Jan 2012, 2:39 AM
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
16 Jan 2012, 6:16 AM
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
16 Jan 2012, 8:35 AM
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');
}
});