How do place button outside of the form panel?

[profunctional]

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.

Thanks!

[TommyMaintz]

Could you provide us with some source code? From the screenshot it is hard to see how you have set up the panel.

[profunctional]

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: 'vincent@test.com',
required: true
}, {
xtype: 'passwordfield',
placeholder: 'Password',
name: 'Password',
value: 'password55',
required: true
}, {
xtype: 'checkbox',
name: 'RememberMe',
label: 'Save login?',
style: 'white-space:nowrap'
},
loginButton
]
}]
});


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>');
Ext.Ajax.request({
url: loginAction,
method: 'post',
params: loginForm.getValues(),
success: function(response, opts) {
x = Ext.decode(response.responseText);

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

Ext.getBody().unmask();
}
});
}
});


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