Aligning a textfield to right in a container - extjs

Question

I am trying to align a textfield to the right
From : _____________ To:____________
**Textbox here** **Textbox here**
I use column layout for from and to inputs, but I cannot get the textbox align to the right in each column.
Ext.define('AY.view.Temperature', {
requires: "Ext.form.field.ComboBox",
extend: 'Ext.form.Panel',
alias: 'widget.tempForm',
title: 'Temperature Convertor',
layout: 'column',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
bodyStyle : Ext.isIE
? 'padding:5px 5px 5px 5px;'
: 'padding:5px 5px 5px;',
// border: 'true',
items: [
{
xtype:'combo',
fieldLabel: 'From',
store: tempTypes,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
},
{
xtype: 'tbspacer',
height: 10
},
{
xtype: 'panel',
layout: {
type:'hbox',
align: 'middle'
},
items:[
{
xtype: 'tbfill',
flex: 1
},
{
xtype: 'textfield',
hideLabel: true,
ctCls : 'spaces',
name: 'from',
flex: 2,
allowBlank: 'false'
}
]
}
]
},
{
xtype :'form',
items: [
{
xtype: 'combo',
fieldLabel: 'To',
store: tempTypes,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
},
{
xtype: 'textfield',
name: 'to',
hideLable: true,
readOnly: 'true'
}
]
}]
/*buttons:[{
text: 'convert',
handler: function(){
// convertTemp()
}
}]*/
//console.log("Here it is "+tempTypes);
this.callParent(arguments);
}
How do I introduce empty space before the textfield?

Answer 1

Like so (see the fiddle):
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
title: 'Temperature Convertor',
autoShow: true,
items: [
{
xtype: 'combo',
fieldLabel: 'From',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
}, {
xtype: 'tbspacer',
height: 10
}, {
xtype: 'fieldcontainer',
anchor: '100%',
layout: {
type: 'hbox'
},
items: [{
xtype: 'container',
width: 105, // need to match the fieldLabel width
height: 10
}, {
xtype: 'textfield',
flex: 1,
ctCls: 'spaces',
name: 'from',
allowBlank: 'false'
}]
} // rest of the form...
],
renderTo: Ext.getBody()
});
Note: You must not nest forms in other forms! And renderTo: Ext.getBody() must not be used for nested items!