PDA

View Full Version : Align button in FieldSet



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

29383

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,
autoHeight:true,
items : [
/* code to add first input box and combo box omitted */
kpiUpper,
{
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?

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

domurtag
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?

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

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