docs/source/Toolbar.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-toolbar-Toolbar-method-constructor'><span id='Ext-toolbar-Toolbar'>/**
  19 </span></span> * Basic Toolbar class. Although the {@link Ext.container.Container#defaultType defaultType} for Toolbar is {@link Ext.button.Button button}, Toolbar
  20  * elements (child items for the Toolbar container) may be virtually any type of Component. Toolbar elements can be created explicitly via their
  21  * constructors, or implicitly via their xtypes, and can be {@link #add}ed dynamically.
  22  *
  23  * ## Some items have shortcut strings for creation:
  24  *
  25  * | Shortcut | xtype         | Class                         | Description
  26  * |:---------|:--------------|:------------------------------|:---------------------------------------------------
  27  * | `-&gt;`     | `tbfill`      | {@link Ext.toolbar.Fill}      | begin using the right-justified button container
  28  * | `-`      | `tbseparator` | {@link Ext.toolbar.Separator} | add a vertical separator bar between toolbar items
  29  * | ` `      | `tbspacer`    | {@link Ext.toolbar.Spacer}    | add horiztonal space between elements
  30  *
  31  *     @example
  32  *     Ext.create('Ext.toolbar.Toolbar', {
  33  *         renderTo: document.body,
  34  *         width   : 500,
  35  *         items: [
  36  *             {
  37  *                 // xtype: 'button', // default for Toolbars
  38  *                 text: 'Button'
  39  *             },
  40  *             {
  41  *                 xtype: 'splitbutton',
  42  *                 text : 'Split Button'
  43  *             },
  44  *             // begin using the right-justified button container
  45  *             '-&gt;', // same as { xtype: 'tbfill' }
  46  *             {
  47  *                 xtype    : 'textfield',
  48  *                 name     : 'field1',
  49  *                 emptyText: 'enter search term'
  50  *             },
  51  *             // add a vertical separator bar between toolbar items
  52  *             '-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
  53  *             'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
  54  *             { xtype: 'tbspacer' },// same as ' ' to create Ext.toolbar.Spacer
  55  *             'text 2',
  56  *             { xtype: 'tbspacer', width: 50 }, // add a 50px space
  57  *             'text 3'
  58  *         ]
  59  *     });
  60  *
  61  * Toolbars have {@link #enable} and {@link #disable} methods which when called, will enable/disable all items within your toolbar.
  62  *
  63  *     @example
  64  *     Ext.create('Ext.toolbar.Toolbar', {
  65  *         renderTo: document.body,
  66  *         width   : 400,
  67  *         items: [
  68  *             {
  69  *                 text: 'Button'
  70  *             },
  71  *             {
  72  *                 xtype: 'splitbutton',
  73  *                 text : 'Split Button'
  74  *             },
  75  *             '-&gt;',
  76  *             {
  77  *                 xtype    : 'textfield',
  78  *                 name     : 'field1',
  79  *                 emptyText: 'enter search term'
  80  *             }
  81  *         ]
  82  *     });
  83  *
  84  * Example
  85  *
  86  *     @example
  87  *     var enableBtn = Ext.create('Ext.button.Button', {
  88  *         text    : 'Enable All Items',
  89  *         disabled: true,
  90  *         scope   : this,
  91  *         handler : function() {
  92  *             //disable the enable button and enable the disable button
  93  *             enableBtn.disable();
  94  *             disableBtn.enable();
  95  *
  96  *             //enable the toolbar
  97  *             toolbar.enable();
  98  *         }
  99  *     });
 100  *
 101  *     var disableBtn = Ext.create('Ext.button.Button', {
 102  *         text    : 'Disable All Items',
 103  *         scope   : this,
 104  *         handler : function() {
 105  *             //enable the enable button and disable button
 106  *             disableBtn.disable();
 107  *             enableBtn.enable();
 108  *
 109  *             //disable the toolbar
 110  *             toolbar.disable();
 111  *         }
 112  *     });
 113  *
 114  *     var toolbar = Ext.create('Ext.toolbar.Toolbar', {
 115  *         renderTo: document.body,
 116  *         width   : 400,
 117  *         margin  : '5 0 0 0',
 118  *         items   : [enableBtn, disableBtn]
 119  *     });
 120  *
 121  * Adding items to and removing items from a toolbar is as simple as calling the {@link #add} and {@link #remove} methods. There is also a {@link #removeAll} method
 122  * which remove all items within the toolbar.
 123  *
 124  *     @example
 125  *     var toolbar = Ext.create('Ext.toolbar.Toolbar', {
 126  *         renderTo: document.body,
 127  *         width   : 700,
 128  *         items: [
 129  *             {
 130  *                 text: 'Example Button'
 131  *             }
 132  *         ]
 133  *     });
 134  *
 135  *     var addedItems = [];
 136  *
 137  *     Ext.create('Ext.toolbar.Toolbar', {
 138  *         renderTo: document.body,
 139  *         width   : 700,
 140  *         margin  : '5 0 0 0',
 141  *         items   : [
 142  *             {
 143  *                 text   : 'Add a button',
 144  *                 scope  : this,
 145  *                 handler: function() {
 146  *                     var text = prompt('Please enter the text for your button:');
 147  *                     addedItems.push(toolbar.add({
 148  *                         text: text
 149  *                     }));
 150  *                 }
 151  *             },
 152  *             {
 153  *                 text   : 'Add a text item',
 154  *                 scope  : this,
 155  *                 handler: function() {
 156  *                     var text = prompt('Please enter the text for your item:');
 157  *                     addedItems.push(toolbar.add(text));
 158  *                 }
 159  *             },
 160  *             {
 161  *                 text   : 'Add a toolbar seperator',
 162  *                 scope  : this,
 163  *                 handler: function() {
 164  *                     addedItems.push(toolbar.add('-'));
 165  *                 }
 166  *             },
 167  *             {
 168  *                 text   : 'Add a toolbar spacer',
 169  *                 scope  : this,
 170  *                 handler: function() {
 171  *                     addedItems.push(toolbar.add('-&gt;'));
 172  *                 }
 173  *             },
 174  *             '-&gt;',
 175  *             {
 176  *                 text   : 'Remove last inserted item',
 177  *                 scope  : this,
 178  *                 handler: function() {
 179  *                     if (addedItems.length) {
 180  *                         toolbar.remove(addedItems.pop());
 181  *                     } else if (toolbar.items.length) {
 182  *                         toolbar.remove(toolbar.items.last());
 183  *                     } else {
 184  *                         alert('No items in the toolbar');
 185  *                     }
 186  *                 }
 187  *             },
 188  *             {
 189  *                 text   : 'Remove all items',
 190  *                 scope  : this,
 191  *                 handler: function() {
 192  *                     toolbar.removeAll();
 193  *                 }
 194  *             }
 195  *         ]
 196  *     });
 197  *
 198  * @constructor
 199  * Creates a new Toolbar
 200  * @param {Object/Object[]} config A config object or an array of buttons to &lt;code&gt;{@link #add}&lt;/code&gt;
 201  * @docauthor Robert Dougan &lt;rob@sencha.com&gt;
 202  */
 203 Ext.define('Ext.toolbar.Toolbar', {
 204     extend: 'Ext.container.Container',
 205     requires: [
 206         'Ext.toolbar.Fill',
 207         'Ext.layout.container.HBox',
 208         'Ext.layout.container.VBox',
 209         'Ext.FocusManager'
 210     ],
 211     uses: [
 212         'Ext.toolbar.Separator'
 213     ],
 214     alias: 'widget.toolbar',
 215     alternateClassName: 'Ext.Toolbar',
 216
 217     isToolbar: true,
 218     baseCls  : Ext.baseCSSPrefix + 'toolbar',
 219     ariaRole : 'toolbar',
 220
 221     defaultType: 'button',
 222
 223 <span id='Ext-toolbar-Toolbar-cfg-vertical'>    /**
 224 </span>     * @cfg {Boolean} vertical
 225      * Set to `true` to make the toolbar vertical. The layout will become a `vbox`.
 226      */
 227     vertical: false,
 228
 229 <span id='Ext-toolbar-Toolbar-cfg-layout'>    /**
 230 </span>     * @cfg {String/Object} layout
 231      * This class assigns a default layout (`layout: 'hbox'`).
 232      * Developers _may_ override this configuration option if another layout
 233      * is required (the constructor must be passed a configuration object in this
 234      * case instead of an array).
 235      * See {@link Ext.container.Container#layout} for additional information.
 236      */
 237
 238 <span id='Ext-toolbar-Toolbar-cfg-enableOverflow'>    /**
 239 </span>     * @cfg {Boolean} enableOverflow
 240      * Configure true to make the toolbar provide a button which activates a dropdown Menu to show
 241      * items which overflow the Toolbar's width.
 242      */
 243     enableOverflow: false,
 244
 245 <span id='Ext-toolbar-Toolbar-cfg-menuTriggerCls'>    /**
 246 </span>     * @cfg {String} menuTriggerCls
 247      * Configure the icon class of the overflow button.
 248      */
 249     menuTriggerCls: Ext.baseCSSPrefix + 'toolbar-more-icon',
 250
 251     // private
 252     trackMenus: true,
 253
 254     itemCls: Ext.baseCSSPrefix + 'toolbar-item',
 255
 256     initComponent: function() {
 257         var me = this,
 258             keys;
 259
 260         // check for simplified (old-style) overflow config:
 261         if (!me.layout &amp;&amp; me.enableOverflow) {
 262             me.layout = { overflowHandler: 'Menu' };
 263         }
 264
 265         if (me.dock === 'right' || me.dock === 'left') {
 266             me.vertical = true;
 267         }
 268
 269         me.layout = Ext.applyIf(Ext.isString(me.layout) ? {
 270             type: me.layout
 271         } : me.layout || {}, {
 272             type: me.vertical ? 'vbox' : 'hbox',
 273             align: me.vertical ? 'stretchmax' : 'middle',
 274             clearInnerCtOnLayout: true
 275         });
 276
 277         if (me.vertical) {
 278             me.addClsWithUI('vertical');
 279         }
 280
 281         // @TODO: remove this hack and implement a more general solution
 282         if (me.ui === 'footer') {
 283             me.ignoreBorderManagement = true;
 284         }
 285
 286         me.callParent();
 287
 288 <span id='Ext-toolbar-Toolbar-event-overflowchange'>        /**
 289 </span>         * @event overflowchange
 290          * Fires after the overflow state has changed.
 291          * @param {Object} c The Container
 292          * @param {Boolean} lastOverflow overflow state
 293          */
 294         me.addEvents('overflowchange');
 295
 296         // Subscribe to Ext.FocusManager for key navigation
 297         keys = me.vertical ? ['up', 'down'] : ['left', 'right'];
 298         Ext.FocusManager.subscribe(me, {
 299             keys: keys
 300         });
 301     },
 302
 303     getRefItems: function(deep) {
 304         var me = this,
 305             items = me.callParent(arguments),
 306             layout = me.layout,
 307             handler;
 308
 309         if (deep &amp;&amp; me.enableOverflow) {
 310             handler = layout.overflowHandler;
 311             if (handler &amp;&amp; handler.menu) {
 312                 items = items.concat(handler.menu.getRefItems(deep));
 313             }
 314         }
 315         return items;
 316     },
 317
 318 <span id='Ext-toolbar-Toolbar-method-add'>    /**
 319 </span>     * Adds element(s) to the toolbar -- this function takes a variable number of
 320      * arguments of mixed type and adds them to the toolbar.
 321      *
 322      * **Note**: See the notes within {@link Ext.container.Container#add}.
 323      *
 324      * @param {Object...} args The following types of arguments are all valid:
 325      *  - `{@link Ext.button.Button config}`: A valid button config object
 326      *  - `HtmlElement`: Any standard HTML element
 327      *  - `Field`: Any form field
 328      *  - `Item`: Any subclass of {@link Ext.toolbar.Item}
 329      *  - `String`: Any generic string (gets wrapped in a {@link Ext.toolbar.TextItem}).
 330      *  Note that there are a few special strings that are treated differently as explained next.
 331      *  - `'-'`: Creates a separator element
 332      *  - `' '`: Creates a spacer element
 333      *  - `'-&gt;'`: Creates a fill element
 334      *
 335      * @method add
 336      */
 337
 338     // private
 339     lookupComponent: function(c) {
 340         if (Ext.isString(c)) {
 341             var shortcut = Ext.toolbar.Toolbar.shortcuts[c];
 342             if (shortcut) {
 343                 c = {
 344                     xtype: shortcut
 345                 };
 346             } else {
 347                 c = {
 348                     xtype: 'tbtext',
 349                     text: c
 350                 };
 351             }
 352             this.applyDefaults(c);
 353         }
 354         return this.callParent(arguments);
 355     },
 356
 357     // private
 358     applyDefaults: function(c) {
 359         if (!Ext.isString(c)) {
 360             c = this.callParent(arguments);
 361             var d = this.internalDefaults;
 362             if (c.events) {
 363                 Ext.applyIf(c.initialConfig, d);
 364                 Ext.apply(c, d);
 365             } else {
 366                 Ext.applyIf(c, d);
 367             }
 368         }
 369         return c;
 370     },
 371
 372     // private
 373     trackMenu: function(item, remove) {
 374         if (this.trackMenus &amp;&amp; item.menu) {
 375             var method = remove ? 'mun' : 'mon',
 376                 me = this;
 377
 378             me[method](item, 'mouseover', me.onButtonOver, me);
 379             me[method](item, 'menushow', me.onButtonMenuShow, me);
 380             me[method](item, 'menuhide', me.onButtonMenuHide, me);
 381         }
 382     },
 383
 384     // private
 385     constructButton: function(item) {
 386         return item.events ? item : this.createComponent(item, item.split ? 'splitbutton' : this.defaultType);
 387     },
 388
 389     // private
 390     onBeforeAdd: function(component) {
 391         if (component.is('field') || (component.is('button') &amp;&amp; this.ui != 'footer')) {
 392             component.ui = component.ui + '-toolbar';
 393         }
 394
 395         // Any separators needs to know if is vertical or not
 396         if (component instanceof Ext.toolbar.Separator) {
 397             component.setUI((this.vertical) ? 'vertical' : 'horizontal');
 398         }
 399
 400         this.callParent(arguments);
 401     },
 402
 403     // private
 404     onAdd: function(component) {
 405         this.callParent(arguments);
 406
 407         this.trackMenu(component);
 408         if (this.disabled) {
 409             component.disable();
 410         }
 411     },
 412
 413     // private
 414     onRemove: function(c) {
 415         this.callParent(arguments);
 416         this.trackMenu(c, true);
 417     },
 418
 419     // private
 420     onButtonOver: function(btn){
 421         if (this.activeMenuBtn &amp;&amp; this.activeMenuBtn != btn) {
 422             this.activeMenuBtn.hideMenu();
 423             btn.showMenu();
 424             this.activeMenuBtn = btn;
 425         }
 426     },
 427
 428     // private
 429     onButtonMenuShow: function(btn) {
 430         this.activeMenuBtn = btn;
 431     },
 432
 433     // private
 434     onButtonMenuHide: function(btn) {
 435         delete this.activeMenuBtn;
 436     }
 437 }, function() {
 438     this.shortcuts = {
 439         '-' : 'tbseparator',
 440         ' ' : 'tbspacer',
 441         '-&gt;': 'tbfill'
 442     };
 443 });</pre>
 444 </body>
 445 </html>