PDA

View Full Version : Layout form fields horizontally



domurtag
17 Nov 2011, 9:10 AM
I'm using Ext JS 2.3.0 and have a bunch of fields contained within a FieldSet

29381

I'd like to have them laid out side-by-side instead, ideally with the label on top of the field instead of to the left of it. The relevant code is:




var kpiFilterCombo = new Ext.form.ComboBox({
name: 'kpi',
store: this.dashboardInst.servicesModel.getAvailableKPIsStore()
});

var kpiLower = new Ext.form.TextField({
fieldLabel: "Lower",
name: 'lowerBound'
});

var kpiUpper = new Ext.form.TextField({
fieldLabel: "Higher",
name: 'upperBound'
});

var kpiFilterFieldset = new Ext.form.FieldSet({
title: locale['label.kpi.condition'],
checkboxToggle: true,
collapsed: true,
autoHeight:true,
items : [
kpiLower,
kpiFilterCombo,
kpiUpper,
]
});

darthwes
17 Nov 2011, 10:37 AM
I assume you meant ExtJS 3.2 (2.3 would go in another forum), the basic answer for your question is to use a composite field. That would let you put the fields on the same line. I believe (check me) that the compositefield has a mechanism to allow for one label instead of multiple, but I'd be hard-pressed to figure out how to put the multiple labels above the fields.

Hopefully a forum bystander can help us out on that one.

Sorry I can't give you the whole answer, hope I helped some...

domurtag
17 Nov 2011, 10:55 AM
No, I really meant Ext JS 2.3.0. Do you have a link for the appropriate forum for this version?
Unfortunately CompositeField doesn't exist in 2.3.0

darthwes
17 Nov 2011, 10:23 PM
http://www.sencha.com/forum/forumdisplay.php?9-Ext-2.x-Help-amp-Discussion