title: Extjs 4, arrange form fields in tbar
body: <p><img src="https://i.stack.imgur.com/6PTKF.jpg" alt="enter image description here"></p>
  
  <pre><code>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"
          }
      ]
      })
  </code></pre>
  
  <p>I put my questions into attached image.</p>
  
  <p>(Space between ratio buttons and remove strange right margin space in datefield.)</p>
  
  <p>and the button in the tbar looks not like button. it looks just text. anybody know make it good looking button?</p>
  
  <p>thank you!</p>