ExtJS form with labels and fields on the same line

Question

I'm striving to create an ExtJS form with two labeled text fields. I would like both the labels and the input fields to appear on the same line. The code I've come up with breaks the text fields, showing the labels on the first line and the input fields on the next line.

What I have: http://jsfiddle.net/aw2Pr/

The fix would be probably extremely simple but I can't seem to figure out. This would be a piece of cake to do in HTML, I mean, like this:

<label>Amount: <input /></label>
<label>Currency: <input /></label>

http://jsfiddle.net/AyqYr/

How do I get a similar layout in ExtJS?

I've already tried changing the layout, changing the with of the textfields, assigning a width to the field labels, asking Google... no help so far.

Answer 1

To achieve fields with label on same line, remove style from default config by creating a container with horizontal layout.

See example code below:

Ext.onReady(function() {    
    var addUserForm = Ext.create(
        'Ext.container.Container',
        {
            renderTo: Ext.getBody(),
            layout: {
                type: 'hbox'
            },
            anchor: '100%',
            defaults: {
                width: 200,
                xtype: 'textfield'
            },
            items: [{
                name: 'amount',
                fieldLabel: 'Amount'
            },{
                name: 'currency',
                fieldLabel: 'Currency'
            }]
        }
    );
});