Question

extjs5.1 toolBar items之间间隔太大

不知道为什么间隔这么大把后面的内容都挤没了，代码如下：
dockedItems: [{
xtype: 'toolbar',
itemId: 'ctnComplyDisDetailChartBottomToolbar',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle',
pack: 'start'
},
items: [
'<b>Add Manual Adjustment:<b>',
'->',
{
xtype: 'datefield',
id: 'cmp-ComplyDisDetailToolbarDate',
itemId: 'cmpComplyDisDetailToolbarDate',
cls: 'tbarfields',
// margin: '0 0 0 0',
emptyText: 'Effective Date',
format: 'm/d/Y',
maxValue: new Date(),
maxLength: 10,
enforceMaxLength: true
},
// '->',
{
xtype: 'textfield',
id: 'cmp-ComplyDisDetailToolbarQuantity',
itemId: 'cmpComplyDisDetailToolbarQuantity',
cls: 'tbarfields',
emptyText: 'Adj Quantity',
//width: 100,
maxLength: 50,
enforceMaxLength: true
},
// '->',
{
xtype: 'combobox',
multiSelect: false,
itemId: 'cmpComplyDisDetailToolbarReason',
cls: 'tbarfields',
emptyText: 'Reason',
valueField: 'text',
displayField: 'text',
//width: 250,
editable: true,
store: {
fields: [{name: 'text',type: 'string'}],
data: [{text: 'Purchase from Special Vendor'},
{text: 'Drug Expiration'},
{text: 'Controlled Substance'},
{text: '304B/504B Drug'},
{text: 'Other'}
]
}
},
// '->',
{
xtype: 'textfield',
itemId: 'cmpComplyDisDetailToolbarNote',
cls: 'tbarfields',
emptyText: 'Note',
//width: 300,
maxLength: 200,
enforceMaxLength: true
},
// '->',
{
text: 'Submit',
xtype: 'button',
itemId: 'cmpComplyDisDetailToolbarSubmit',
handler: function(button, e, eOpts){
}
}
]
}],

Answer 1

'->',不要用这个，可以考虑tbar的xtype用hbox，然后用flex去控制宽度。需要加间隔用{xtype:'spacer', width:xx}去添加空格。 ->的作用不是简单的加距离。