PDA

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



shiplu
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.


39493


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.

shiplu
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.