Extjs 4, arrange form fields in tbar - extjs4

Question

tbar : new Ext.Toolbar({
items : [
'',{
xtype : 'radiofield',
name : 'searchType',
value : 'order_name',
boxLabel : 'Order Name'
},'',{
xtype : 'radiofield',
name : 'searchType',
value : 'order_no',
boxLabel : 'Order No'
},'',{
xtype : 'radiofield',
name : 'searchType',
value : 'status',
boxLabel : 'Status'
},'=',{
xtype : 'textfield',
name : 'keyword',
value : 'Keyword'
},'|',{
xtype : 'datefield',
name : 'order_from',
fieldLabel : 'From ',
labelStyle : 'width:50px',
value : new Date()
},'~',{
xtype : 'datefield',
name : 'order_to',
fieldLabel : "To ",
labelStyle : 'width:50px',
value : new Date()
},'|',{
xtype : 'button',
text : "Search"
}
]
})
I put my questions into attached image.
(Space between ratio buttons and remove strange right margin space in datefield.)
and the button in the tbar looks not like button. it looks just text. anybody know make it good looking button?
thank you!

Answer 1

To add space you can add inside the quotes, essentially any html can be inserted including images.
The extra space is related to the width the date field is trying to grab. You should not set width in the labelStyle but set it directly so that the field can properly calculate the amountof space that it needs.
For example:
labelWidth: 50, //label only
width: 200, //label + input
your live example: http://jsfiddle.net/dbrin/PhAbR/2/