ExtJS4，在tbar中排列表单字段

我把我的问题放在附件中

（比率按钮之间留有空格，并删除datefield中奇怪的右边距空格。）

tbar中的按钮看起来不像按钮。它看起来只是文字。有人知道怎么做才好看吗

---

谢谢大家!

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

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

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:new Ext.toolbar（{…”）创建了工具栏，但您使用“tbar:Ext.create（'Ext.toolbar'，{…”创建了工具栏。您知道有多不同吗？我应该遵循哪种方式？谢谢！您在创建ExtJS组件时不应该再使用“new”关键字，而是使用Ext.create。

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