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

Я вставил свои вопросы в прикрепленное изображение.

(Пробел между кнопками отношения и удаление странного правого поля в поле даты).

и кнопка в тбар выглядит не как кнопка.это выглядит просто текст.Кто-нибудь знает, как сделать красивую кнопку?

Спасибо!

Answer 1

Чтобы добавить пробел, вы можете добавить внутри кавычек, практически любой HTML может быть вставлен, включая изображения.

Дополнительный пробел связан с шириной, которую пытается получить поле даты. Вы не должны устанавливать ширину в labelStyle, а должны устанавливать ее напрямую, чтобы поле могло правильно рассчитать необходимое ему пространство. Например:

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

Ваш живой пример: http://jsfiddle.net/dbrin/PhAbR/2/