How to display form fields inline in Sencha Touch 2

As requested by one of my reader, Today we are going to see how to display form fields inline (display in a single line). Similar to the below snapshot.

Source Code:

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',

    config: {
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Display Form Inline'
            },
            {
                xtype: 'textfield',
                id: 'username',
                label: 'Username',
                placeHolder: 'Enter Username'
            },
            {
                xtype: 'panel',
                height: 50,
                width: '100%',
                layout: {
                    type: 'hbox'
                },
                items: [
                    {
                        xtype: 'textfield',
                        flex: 1,
                        id: 'firstName',
                        label: 'FirstName',
                        labelWidth: 100,
                        placeHolder: 'Enter FirstName'
                    },
                    {
                        xtype: 'textfield',
                        flex: 1,
                        id: 'lastName',
                        label: 'LastName',
                        labelWidth: 100,
                        placeHolder: 'Enter LastName'
                    }
                ]
            }
        ]
    }
});

Explanation:

From the above snapshot, you can see three form fields- Username, FirstName and LastName. In that Username field is displayed in a row and FirstName, LastName fields are getting displayed in a single row (one after another).

In order to display form fields in a single row, I created a panel with layout type set to 'hbox'. This layout configuration will display fields in a horizontal way.

Hope, you enjoyed this Post.