先看例子代码:
* Ext.create('Ext.toolbar.Toolbar', { * renderTo: document.body, * width : 500, * items: [ * { * // xtype: 'button', // default for Toolbars * text: 'Button' * }, * { * xtype: 'splitbutton', * text : 'Split Button' * }, * // begin using the right-justified button container * '->', // same as { xtype: 'tbfill' } * { * xtype : 'textfield', * name : 'field1', * emptyText: 'enter search term' * }, * // add a vertical separator bar between toolbar items * '-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator * 'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem * { xtype: 'tbspacer' },// same as ' ' to create Ext.toolbar.Spacer * 'text 2', * { xtype: 'tbspacer', width: 50 }, // add a 50px space * 'text 3' * ] * });
很多时候大家可以看到例子中items:[{}]有横线,空格类似符号,控制toolbar 显示,这些符号是快捷方式:
->:表示按钮右靠齐,-:表示垂直分离两个按钮,空格:表示水平分离
* ## Some items have shortcut strings for creation: * * | Shortcut | xtype | Class | Description * |:---------|:--------------|:------------------------------|:--------------------------------------------------- * | `->` | `tbfill` | {@link Ext.toolbar.Fill} | begin using the right-justified button container * | `-` | `tbseparator` | {@link Ext.toolbar.Separator} | add a vertical separator bar between toolbar items * | ` ` | `tbspacer` | {@link Ext.toolbar.Spacer} | add horiztonal space between elements