How can I Increase space between fields in EXTJS - extjs

Question

I have a window where I have items as in below image.I want give gap between fileds
code:
new Ext.Window({
title : bundle.getMsg('add.camera'),
id:'win-add-camera',
closable:true,
autoHeight:true,
modal:true,
defaults : {
labelWidth: 60,
labelAlign: 'left',
margin: '0 0 20 0'
},
items: [{
xtype:'form',
layoutConfig: {
trackLabels: true
},
id: 'form-camera',
autoHeight:true,
autoScroll:true,
items:[
{
layout:'column',
items:[
{
columnWidth: .50,
bodyPadding:30,
margin: '0 0 20 0',
layout: 'form',
defaults:{anchor:'80%'},
items: [ {
id:'cam-name-id',
fieldLabel : bundle.getMsg('camera.name'),
name : 'cameraName',
margin: '0 0 20 0',
xtype:'textfield',
width:450,
emptyText : bundle.getMsg('enter.camName'),
maxLength:10,
enforceMaxLength:true
,required:true,
},
{
id:'url-id',
fieldLabel : bundle.getMsg('url'),
name : 'cameraWebUrl',
xtype:'textfield',
width:450,
margin: '0 0 20 0',
emptyText : bundle.getMsg('enter.url')
,
maxLength:10,enforceMaxLength:true,required:true,
},
{
id:'place-id',
fieldLabel : bundle.getMsg('place.name'),
maxLength:35,
name : 'cameraPlaceName',
xtype:'textfield',
width:450,
emptyText : bundle.getMsg('enter.place'),required:true
},
{
id:'latitude-id',
fieldLabel :bundle.getMsg('lattitude'),
name : 'cameraLatitude',xtype:'textfield',
width:450,emptyText :bundle.getMsg('enter.lattitude'), growMax: 500,required:true
},
{
id:'longitude-id',
fieldLabel : bundle.getMsg('longitude'),
name : 'cameraLongitude',xtype:'textfield',
width:450,emptyText : bundle.getMsg('enter.long'),required:true
},
{
xtype:'combo',
id: 'camera-combo-id',
name:'cameraStatus',
store : new Ext.data.ArrayStore({
data:[["Enable","1"],["Disable","2"]],
fields : ['cameraStatus','no']
}),
fieldLabel : bundle.getMsg('camera.status'),
displayField :'cameraStatus',
emptyText : bundle.getMsg('advice.select'),
valueField : 'no',
selectOnFocus:true,
allowBlank: false,
autoSelect:false,
mode:'local',
listeners:{
'select': function(){
camera_status_combo_value=Ext.getCmp('camera-combo-id').getValue();
camera_status_combo_value_name = Ext.getCmp('camera-combo-id').getRawValue();
alert(camera_status_combo_value)
alert(camera_status_combo_value_name)
},
'afterrender':function(){
this.getStore().load();
}
}
},
{
xtype : 'combo',
id: 'police-station-name-id',
name:'policeStationName',
width:450,
store : police_station_store,
fieldLabel : bundle.getMsg('policestation'),required:true,
displayField :'policeStationName',
emptyText : bundle.getMsg('selectpolicestation'),
valueField : 'gid',
triggerAction:"all",
selectOnFocus:true,
forceSelection: true,
queryMode : 'local',
listeners:{
'select': function(){
police_stn_id=Ext.getCmp('police-station-name-id').getValue();
police_station_combo=Ext.getCmp('police-station-name-id').getValue();
},
'afterrender':function(){
this.getStore().load();
}
}
},

Answer 1

I got the solution
I have written below line in between fields
{
xtype: 'tbspacer',
height:10
},
and also we can add instead of above code
{
height:10
}
both will work !
Before Adding this code:
after adding the code:

Answer 2

You need to set margin for the fields.
Check this fiddle - https://fiddle.sencha.com/#fiddle/md1
The fiddle is in 5.1 but the config is available in 4.x as well.

Answer 3

Use layout:'hbox' for every row.
But, looks like you should use type: 'label' instead of setting label right in the textfield component.
Here is a fiddle for you: https://fiddle.sencha.com/#fiddle/md3
My layout:
layout: {
type: 'vbox',
align: 'stretch'
},
width: 400,
defaults: {
layout: 'hbox',
margin: 10
},
items: [{
items: [{
xtype: 'label',
text: 'Market',
forId: 'test-1',
flex: 1
}, {
xtype: 'combo',
inputId: 'test-1',
allowBlank: false,
store: store,
queryMode: 'local',
displayField: 'MarketName',
forceSelection: true,
valueField: 'Id',
flex: 3
}]
}, {
items: [{
xtype: 'label',
text: 'Name',
forId: 'test-2',
flex: 1
}, {
xtype: 'textfield',
inputId: 'test-2',
flex: 3
}]
}],