View Full Version : Align button in FieldSet

17 Nov 2011, 10:26 AM
Using Ext JS 2.3.0 I've created a FieldSet that looks like this


I would like the Remove Condition button to appear underneath the input fields instead of under the labels, my code is:

var kpiUpper = new Ext.form.TextField({
fieldLabel: "Higher",
name: 'upperBound',
allowBlank: true

var kpiFilterFieldset = new Ext.form.FieldSet({
jsonForm: true,
jsonType: 'object',
jsonName: 'kpiFilter',
title: locale['label.kpi.condition'],
checkboxToggle: true,
collapsed: true,
items : [
/* code to add first input box and combo box omitted */
xtype: 'button',
text: 'Remove Condition',

I know I could do this by setting a left margin on the button of the appropriate number of pixels, but is there a better way?

17 Nov 2011, 10:41 AM
All panels have

buttonAlign (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Panel-cfg-buttonAlign) : String (http://docs.sencha.com/ext-js/3-4/#!/api/String)
The alignment of any buttons (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Panel-cfg-buttons) added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right').
Defaults to: "right"

Fieldsets are panels. GL, Happy hunting.

17 Nov 2011, 10:53 AM
Thanks for your answer. So if I add my button to the buttons property (instead of items), I guess I can centre it, but that probably won't align it with the input fields.

Is it possible to have it aligned with the left edge of the input fields above?

17 Nov 2011, 10:22 PM
Sure, put button in a compositefield.

18 Nov 2011, 1:51 AM
There is no CompositeField in 2.3.0