src/toolbar/Spacer.js

   1 /**
   2  * @class Ext.toolbar.Spacer
   3  * @extends Ext.toolbar.Item
   4  * A simple element that adds extra horizontal space between items in a toolbar.
   5  * By default a 2px wide space is added via css specification:
   6  * <pre><code>
   7     .x-toolbar .x-toolbar-spacer {
   8         width:2px;
   9     }
  10  * </code></pre>
  11  * <p>Example usage:</p>
  12  * {@img Ext.toolbar.Spacer/Ext.toolbar.Spacer.png Toolbar Spacer}
  13  * <pre><code>
  14     Ext.create('Ext.panel.Panel', {
  15         title: 'Toolbar Spacer Example',
  16         width: 300,
  17         height: 200,
  18         tbar : [
  19             'Item 1',
  20             {xtype: 'tbspacer'}, // or ' '
  21             'Item 2',
  22             // space width is also configurable via javascript
  23             {xtype: 'tbspacer', width: 50}, // add a 50px space
  24             'Item 3'
  25         ],
  26         renderTo: Ext.getBody()
  27     });
  28 </code></pre>
  29  * @constructor
  30  * Creates a new Spacer
  31  * @xtype tbspacer
  32  */
  33 Ext.define('Ext.toolbar.Spacer', {
  34     extend: 'Ext.Component',
  35     alias: 'widget.tbspacer',
  36     alternateClassName: 'Ext.Toolbar.Spacer',
  37     baseCls: Ext.baseCSSPrefix + 'toolbar-spacer',
  38     focusable: false
  39 });