View Full Version : How do place button outside of the form panel?

30 Jun 2010, 4:35 PM
I have tried to create an Ext.Panel, and add my formpanel and button as items to it, hoping that the login button would appear outside of the form. I've attached a screenshot of the problem.

I just want the button to be outside of the forms border for a more traditional look. Please advise.


30 Jun 2010, 5:38 PM
Could you provide us with some source code? From the screenshot it is hard to see how you have set up the panel.

30 Jun 2010, 5:58 PM
Here is the code for the form panel:

var loginForm = new Ext.form.FormPanel({
items: [{
xtype: 'fieldset',
title: 'Login',
items: [
xtype: 'textfield',
placeholder: 'Username',
name: 'UserName',
value: '[email protected]',
required: true
}, {
xtype: 'passwordfield',
placeholder: 'Password',
name: 'Password',
value: 'password55',
required: true
}, {
xtype: 'checkbox',
name: 'RememberMe',
label: 'Save login?',
style: 'white-space:nowrap'

the button code:

var loginButton = new Ext.Button({
text: 'Login',
ui: 'action',
style: 'margin:2%;',
handler: function() {
Ext.getBody().mask(false, '<div class="demos-loading">Loading&hellip;</div>');
url: loginAction,
method: 'post',
params: loginForm.getValues(),
success: function(response, opts) {
x = Ext.decode(response.responseText);

if (x.errorMessage != null)
else {
mainPanel.setCard(dashboard, 'slide');


I just want the button placed outside the borders of the form. Thanks again.