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