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/