ext4js - placing a textfield next to a checkboxfield - forms

Question

I'm new to using ext4js and web app dev in general.
I have a form, and in that form, I want a checkbox and right next to it is a textfield. I changed the layout type of the form from vbox to column and I set the width of the checkbox and textfield so that they'll both be in one line. So far, that worked great for me.
However, when I duplicated the checkbox and textfield, the result changed. The duplicated checkbox and textfield were on different lines and they were centered.
Here is my code:
{
xtype: 'form',
itemId: 'spousework',
maxWidth: 500,
width: 75,
layout: 'column',
bodyBorder: true,
bodyPadding: 10,
bodyStyle: 'border-right-style: solid;',
frameHeader: false,
header: false,
title: 'My Form',
items: [
{
xtype: 'displayfield',
itemId: 'userNameField2',
margin: '10 0 10 0',
maxWidth: 700,
minWidth: 700,
width: 700,
defaultAlign: 'center',
fieldLabel: 'Spouse\'s Work',
hideLabel: true,
labelWidth: 0,
value: 'SPOUSE\'S WORK',
fieldStyle: 'color: #007AA3; text-align: left; font-weight: bold;'
},
{
xtype: 'checkboxfield',
maxHeight: 20,
fieldLabel: 'Spouse\'s Employer',
labelWidth: 120,
boxLabel: ''
},
{
xtype: 'textfield',
margin: '0 0 0 10',
maxHeight: 20,
width: 300,
fieldLabel: '',
labelWidth: 120
},
{
xtype: 'checkboxfield',
maxHeight: 20,
fieldLabel: 'Spouse\'s Employer',
labelWidth: 120,
boxLabel: ''
},
{
xtype: 'textfield',
margin: '0 0 0 10',
maxHeight: 20,
width: 300,
fieldLabel: '',
labelWidth: 120
}
]
}
Can anyone help? How do you properly line up items in succeeding rows using a column layout for the form?

Answer 1

you can use filedcontainer in your form like below with column layout
{
xtype: 'fieldcontainer',
layout: 'column',
fieldLabel: 'Spouse\'s Employer',
items: [
{
xtype: 'checkboxfield',
maxHeight: 20,
boxLabel: '',
margin: '0 5 0 0'
},
{
xtype: 'textfield',
}
]}