View Full Version : Reduce space between docked buttons and form fields in accordion layout

19 Oct 2012, 8:14 AM
I have an accordion layout that contains 3 forms. Each of the form contains 3 buttons. I see the buttons are docked at the very bottom of the panel. How can I put it just bellow the form fields. See the image to understand it.


Related Code.

Ext.create('Ext.container.Viewport', { layout: 'border',
defaults: {
items: [{
region: 'north',
html: header.html,
height: 120
region: 'center',
html: '<h3>Some text. Lorem ipsom?</h3>'
title: 'Access Panel',
region: 'east',
layout: 'accordion',
defaults: {
bodyPadding: '10 10 100 10',
collapsible: true,
layoutConfig: {
animate: true,
activeOnTop: true
width: 350,
items: [loginForm, regForm, passForm]
I think as all child items are "Ext.form.Panel", changing the "defaults" config will be able to fix it.

Any idea?

James Goddard
19 Oct 2012, 10:47 AM
Make them part of the form, ie add an hbox container to the form and put the buttons in that, instead of using buttons/bbar/docked bottom/whatever.

19 Oct 2012, 11:15 AM
That worked. I just moved my "buttons" array items to "items" array. Also I had to add xtype: 'button' and margin: '0 5 0 0' for each of the buttons so that they appear nicely.