先看例子代码:
* 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