Extjs 4，在tbar中排列表单字段

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"
        }
    ]
    })

我把我的问题写成附图。

（比率按钮之间的空格并删除日期字段中奇怪的右边距空间。）

并且tbar中的按钮看起来不像按钮。它看起来只是文字。谁知道让它好看的按钮？

谢谢你！

Answer 1

要添加空格，您可以在引号内添加，基本上可以插入任何html，包括图像。

额外空间与日期字段尝试抓取的宽度有关。您不应在labelStyle中设置宽度，而是直接设置它，以便该字段可以正确计算所需的空间量。 例如：

labelWidth: 50, //label only
width: 200,  //label + input

你的实例：http://jsfiddle.net/dbrin/PhAbR/2/