Using hbox to align form fields on the same horizontal line

[JeffWithG]

I'm trying to add multiple form fields on the same line using hbox layout, but the styling is not what I expect. What is happening is the items in the hbox are getting the 'first-child' class added, so the items have the rounded corners, etc.

Can anyone point me in the right direction? What is the best way to layout multiple fields on one horizontal line?

Thank you!!

here is the form:


views.MedDetail = Ext.extend(Ext.form.FormPanel, { id: 'MedDetail',
fullscreen: true,
items: [{
xtype: 'fieldset',
title: 'Add Medication',
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name'
},{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'textfield',
name: 'dosage',
flex: 1,
label: 'Dosage'
},{
xtype: 'selectfield',
name: 'measure',
options: [{
text: 'Tablespoon',
value: 'tbs'
},{
text: 'Teaspoon',
value: 'tsp'
}]
}]
}]
}],
listeners: {
'beforeactivate': function () {
medtreker.views.titlebar.down('#saveMed').show();
}
}
});

[JeffWithG]

I'm kind of stuck - anyone have any suggestions on the best way to layout multiple form fields on the same horizontal line, something like:

line1: [label] [textfield]
line2: [label] [textfield] [selectfield]
line3: [label] [textfield]

Thanks!

[gulsan]

Hi,
could you solve it?
I need a solution for this as well.

What I want is to have two textfields assigned to one label:

<Label> <TextField1> <TextField2>

Hope someone knows how to do this =)

[JeffWithG]

I did not, I reworked my design and stacked them vertically. However, I am working on a multiple column 'picker' that will take one or more stores/data sets to get the multiple choice options on one vertical line. I'll post it here when done.