docs/source/Toolbar.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.layout.ToolbarLayout"></div>/**
  10  * @class Ext.layout.ToolbarLayout
  11  * @extends Ext.layout.ContainerLayout
  12  * Layout manager implicitly used by Ext.Toolbar.
  13  */
  14 Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
  15     monitorResize : true,
  16     triggerWidth : 18,
  17     lastOverflow : false,
  18     forceLayout: true,
  19
  20     noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
  21     // private
  22     onLayout : function(ct, target){
  23         if(!this.leftTr){
  24             var align = ct.buttonAlign == 'center' ? 'center' : 'left';
  25             target.addClass('x-toolbar-layout-ct');
  26             target.insertHtml('beforeEnd',
  27                  '<table cellspacing="0" class="x-toolbar-ct"><tbody><tr><td class="x-toolbar-left" align="' + align + '"><table cellspacing="0"><tbody><tr class="x-toolbar-left-row"></tr></tbody></table></td><td class="x-toolbar-right" align="right"><table cellspacing="0" class="x-toolbar-right-ct"><tbody><tr><td><table cellspacing="0"><tbody><tr class="x-toolbar-right-row"></tr></tbody></table></td><td><table cellspacing="0"><tbody><tr class="x-toolbar-extras-row"></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>');
  28             this.leftTr = target.child('tr.x-toolbar-left-row', true);
  29             this.rightTr = target.child('tr.x-toolbar-right-row', true);
  30             this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
  31         }
  32         var side = ct.buttonAlign == 'right' ? this.rightTr : this.leftTr,
  33             pos = 0,
  34             items = ct.items.items;
  35
  36         for(var i = 0, len = items.length, c; i < len; i++, pos++) {
  37             c = items[i];
  38             if(c.isFill){
  39                 side = this.rightTr;
  40                 pos = -1;
  41             }else if(!c.rendered){
  42                 c.render(this.insertCell(c, side, pos));
  43             }else{
  44                 if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
  45                     var td = this.insertCell(c, side, pos);
  46                     td.appendChild(c.getPositionEl().dom);
  47                     c.container = Ext.get(td);
  48                 }
  49             }
  50         }
  51         //strip extra empty cells
  52         this.cleanup(this.leftTr);
  53         this.cleanup(this.rightTr);
  54         this.cleanup(this.extrasTr);
  55         this.fitToSize(target);
  56     },
  57
  58     cleanup : function(row){
  59         var cn = row.childNodes;
  60         for(var i = cn.length-1, c; i >= 0 && (c = cn[i]); i--){
  61             if(!c.firstChild){
  62                 row.removeChild(c);
  63             }
  64         }
  65     },
  66
  67     insertCell : function(c, side, pos){
  68         var td = document.createElement('td');
  69         td.className='x-toolbar-cell';
  70         side.insertBefore(td, side.childNodes[pos]||null);
  71         return td;
  72     },
  73
  74     hideItem : function(item){
  75         var h = (this.hiddens = this.hiddens || []);
  76         h.push(item);
  77         item.xtbHidden = true;
  78         item.xtbWidth = item.getPositionEl().dom.parentNode.offsetWidth;
  79         item.hide();
  80     },
  81
  82     unhideItem : function(item){
  83         item.show();
  84         item.xtbHidden = false;
  85         this.hiddens.remove(item);
  86         if(this.hiddens.length < 1){
  87             delete this.hiddens;
  88         }
  89     },
  90
  91     getItemWidth : function(c){
  92         return c.hidden ? (c.xtbWidth || 0) : c.getPositionEl().dom.parentNode.offsetWidth;
  93     },
  94
  95     fitToSize : function(t){
  96         if(this.container.enableOverflow === false){
  97             return;
  98         }
  99         var w = t.dom.clientWidth,
 100             lw = this.lastWidth || 0,
 101             iw = t.dom.firstChild.offsetWidth,
 102             clipWidth = w - this.triggerWidth,
 103             hideIndex = -1;
 104
 105         this.lastWidth = w;
 106
 107         if(iw > w || (this.hiddens && w >= lw)){
 108             var i, items = this.container.items.items,
 109                 len = items.length, c,
 110                 loopWidth = 0;
 111
 112             for(i = 0; i < len; i++) {
 113                 c = items[i];
 114                 if(!c.isFill){
 115                     loopWidth += this.getItemWidth(c);
 116                     if(loopWidth > clipWidth){
 117                         if(!(c.hidden || c.xtbHidden)){
 118                             this.hideItem(c);
 119                         }
 120                     }else if(c.xtbHidden){
 121                         this.unhideItem(c);
 122                     }
 123                 }
 124             }
 125         }
 126         if(this.hiddens){
 127             this.initMore();
 128             if(!this.lastOverflow){
 129                 this.container.fireEvent('overflowchange', this.container, true);
 130                 this.lastOverflow = true;
 131             }
 132         }else if(this.more){
 133             this.clearMenu();
 134             this.more.destroy();
 135             delete this.more;
 136             if(this.lastOverflow){
 137                 this.container.fireEvent('overflowchange', this.container, false);
 138                 this.lastOverflow = false;
 139             }
 140         }
 141     },
 142
 143     createMenuConfig : function(c, hideOnClick){
 144         var cfg = Ext.apply({}, c.initialConfig),
 145             group = c.toggleGroup;
 146
 147         Ext.apply(cfg, {
 148             text: c.overflowText || c.text,
 149             iconCls: c.iconCls,
 150             icon: c.icon,
 151             itemId: c.itemId,
 152             disabled: c.disabled,
 153             handler: c.handler,
 154             scope: c.scope,
 155             menu: c.menu,
 156             hideOnClick: hideOnClick
 157         });
 158         if(group || c.enableToggle){
 159             Ext.apply(cfg, {
 160                 group: group,
 161                 checked: c.pressed,
 162                 listeners: {
 163                     checkchange: function(item, checked){
 164                         c.toggle(checked);
 165                     }
 166                 }
 167             });
 168         }
 169         delete cfg.ownerCt;
 170         delete cfg.xtype;
 171         delete cfg.id;
 172         return cfg;
 173     },
 174
 175     // private
 176     addComponentToMenu : function(m, c){
 177         if(c instanceof Ext.Toolbar.Separator){
 178             m.add('-');
 179         }else if(Ext.isFunction(c.isXType)){
 180             if(c.isXType('splitbutton')){
 181                 m.add(this.createMenuConfig(c, true));
 182             }else if(c.isXType('button')){
 183                 m.add(this.createMenuConfig(c, !c.menu));
 184             }else if(c.isXType('buttongroup')){
 185                 c.items.each(function(item){
 186                      this.addComponentToMenu(m, item);
 187                 }, this);
 188             }
 189         }
 190     },
 191
 192     clearMenu : function(){
 193         var m = this.moreMenu;
 194         if(m && m.items){
 195             m.items.each(function(item){
 196                 delete item.menu;
 197             });
 198         }
 199     },
 200
 201     // private
 202     beforeMoreShow : function(m){
 203         var h = this.container.items.items,
 204             len = h.length,
 205             c,
 206             prev,
 207             needsSep = function(group, item){
 208                 return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
 209             };
 210
 211         this.clearMenu();
 212         m.removeAll();
 213         for(var i = 0; i < len; i++){
 214             c = h[i];
 215             if(c.xtbHidden){
 216                 if(prev && (needsSep(c, prev) || needsSep(prev, c))){
 217                     m.add('-');
 218                 }
 219                 this.addComponentToMenu(m, c);
 220                 prev = c;
 221             }
 222         }
 223         // put something so the menu isn't empty
 224         // if no compatible items found
 225         if(m.items.length < 1){
 226             m.add(this.noItemsMenuText);
 227         }
 228     },
 229
 230     initMore : function(){
 231         if(!this.more){
 232             this.moreMenu = new Ext.menu.Menu({
 233                 listeners: {
 234                     beforeshow: this.beforeMoreShow,
 235                     scope: this
 236                 }
 237             });
 238             this.moreMenu.ownerCt = this.container;
 239             this.more = new Ext.Button({
 240                 iconCls: 'x-toolbar-more-icon',
 241                 cls: 'x-toolbar-more',
 242                 menu: this.moreMenu
 243             });
 244             var td = this.insertCell(this.more, this.extrasTr, 100);
 245             this.more.render(td);
 246         }
 247     },
 248
 249     onRemove : function(c){
 250         delete this.leftTr;
 251         delete this.rightTr;
 252         delete this.extrasTr;
 253         Ext.layout.ToolbarLayout.superclass.onRemove.call(this, c);
 254     },
 255
 256     destroy : function(){
 257         Ext.destroy(this.more, this.moreMenu);
 258         delete this.leftTr;
 259         delete this.rightTr;
 260         delete this.extrasTr;
 261         Ext.layout.ToolbarLayout.superclass.destroy.call(this);
 262     }
 263     <div id="prop-Ext.layout.ToolbarLayout-activeItem"></div>/**
 264      * @property activeItem
 265      * @hide
 266      */
 267 });
 268
 269 Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;
 270
 271 <div id="cls-Ext.Toolbar"></div>/**
 272  * @class Ext.Toolbar
 273  * @extends Ext.Container
 274  * <p>Basic Toolbar class. Although the <tt>{@link Ext.Container#defaultType defaultType}</tt> for Toolbar
 275  * is <tt>{@link Ext.Button button}</tt>, Toolbar elements (child items for the Toolbar container) may
 276  * be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
 277  * or implicitly via their xtypes, and can be <tt>{@link #add}</tt>ed dynamically.</p>
 278  * <p>Some items have shortcut strings for creation:</p>
 279  * <pre>
 280 <u>Shortcut</u>  <u>xtype</u>          <u>Class</u>                  <u>Description</u>
 281 '->'      'tbfill'       {@link Ext.Toolbar.Fill}       begin using the right-justified button container
 282 '-'       'tbseparator'  {@link Ext.Toolbar.Separator}  add a vertical separator bar between toolbar items
 283 ' '       'tbspacer'     {@link Ext.Toolbar.Spacer}     add horiztonal space between elements
 284  * </pre>
 285  *
 286  * Example usage of various elements:
 287  * <pre><code>
 288 var tb = new Ext.Toolbar({
 289     renderTo: document.body,
 290     width: 600,
 291     height: 100,
 292     items: [
 293         {
 294             // xtype: 'button', // default for Toolbars, same as 'tbbutton'
 295             text: 'Button'
 296         },
 297         {
 298             xtype: 'splitbutton', // same as 'tbsplitbutton'
 299             text: 'Split Button'
 300         },
 301         // begin using the right-justified button container
 302         '->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
 303         {
 304             xtype: 'textfield',
 305             name: 'field1',
 306             emptyText: 'enter search term'
 307         },
 308         // add a vertical separator bar between toolbar items
 309         '-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
 310         'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem
 311         {xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer
 312         'text 2',
 313         {xtype: 'tbspacer', width: 50}, // add a 50px space
 314         'text 3'
 315     ]
 316 });
 317  * </code></pre>
 318  * Example adding a ComboBox within a menu of a button:
 319  * <pre><code>
 320 // ComboBox creation
 321 var combo = new Ext.form.ComboBox({
 322     store: new Ext.data.ArrayStore({
 323         autoDestroy: true,
 324         fields: ['initials', 'fullname'],
 325         data : [
 326             ['FF', 'Fred Flintstone'],
 327             ['BR', 'Barney Rubble']
 328         ]
 329     }),
 330     displayField: 'fullname',
 331     typeAhead: true,
 332     mode: 'local',
 333     forceSelection: true,
 334     triggerAction: 'all',
 335     emptyText: 'Select a name...',
 336     selectOnFocus: true,
 337     width: 135,
 338     getListParent: function() {
 339         return this.el.up('.x-menu');
 340     },
 341     iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
 342 });
 343
 344 // put ComboBox in a Menu
 345 var menu = new Ext.menu.Menu({
 346     id: 'mainMenu',
 347     items: [
 348         combo // A Field in a Menu
 349     ]
 350 });
 351
 352 // add a Button with the menu
 353 tb.add({
 354         text:'Button w/ Menu',
 355         menu: menu  // assign menu by instance
 356     });
 357 tb.doLayout();
 358  * </code></pre>
 359  * @constructor
 360  * Creates a new Toolbar
 361  * @param {Object/Array} config A config object or an array of buttons to <tt>{@link #add}</tt>
 362  * @xtype toolbar
 363  */
 364 Ext.Toolbar = function(config){
 365     if(Ext.isArray(config)){
 366         config = {items: config, layout: 'toolbar'};
 367     } else {
 368         config = Ext.apply({
 369             layout: 'toolbar'
 370         }, config);
 371         if(config.buttons) {
 372             config.items = config.buttons;
 373         }
 374     }
 375     Ext.Toolbar.superclass.constructor.call(this, config);
 376 };
 377
 378 (function(){
 379
 380 var T = Ext.Toolbar;
 381
 382 Ext.extend(T, Ext.Container, {
 383
 384     defaultType: 'button',
 385
 386     <div id="cfg-Ext.Toolbar-layout"></div>/**
 387      * @cfg {String/Object} layout
 388      * This class assigns a default layout (<code>layout:'<b>toolbar</b>'</code>).
 389      * Developers <i>may</i> override this configuration option if another layout
 390      * is required (the constructor must be passed a configuration object in this
 391      * case instead of an array).
 392      * See {@link Ext.Container#layout} for additional information.
 393      */
 394     <div id="cfg-Ext.Toolbar-enableOverflow"></div>/**
 395      * @cfg {Boolean} enableOverflow
 396      * Defaults to false. Configure <code>true<code> to make the toolbar provide a button
 397      * which activates a dropdown Menu to show items which overflow the Toolbar's width.
 398      */
 399
 400     trackMenus : true,
 401     internalDefaults: {removeMode: 'container', hideParent: true},
 402     toolbarCls: 'x-toolbar',
 403
 404     initComponent : function(){
 405         T.superclass.initComponent.call(this);
 406
 407         <div id="event-Ext.Toolbar-overflowchange"></div>/**
 408          * @event overflowchange
 409          * Fires after the overflow state has changed.
 410          * @param {Object} c The Container
 411          * @param {Boolean} lastOverflow overflow state
 412          */
 413         this.addEvents('overflowchange');
 414     },
 415
 416     // private
 417     onRender : function(ct, position){
 418         if(!this.el){
 419             if(!this.autoCreate){
 420                 this.autoCreate = {
 421                     cls: this.toolbarCls + ' x-small-editor'
 422                 };
 423             }
 424             this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
 425             Ext.Toolbar.superclass.onRender.apply(this, arguments);
 426         }
 427     },
 428
 429     <div id="method-Ext.Toolbar-add"></div>/**
 430      * <p>Adds element(s) to the toolbar -- this function takes a variable number of
 431      * arguments of mixed type and adds them to the toolbar.</p>
 432      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 433      * @param {Mixed} arg1 The following types of arguments are all valid:<br />
 434      * <ul>
 435      * <li>{@link Ext.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
 436      * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
 437      * <li>Field: Any form field (equivalent to {@link #addField})</li>
 438      * <li>Item: Any subclass of {@link Ext.Toolbar.Item} (equivalent to {@link #addItem})</li>
 439      * <li>String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}).
 440      * Note that there are a few special strings that are treated differently as explained next.</li>
 441      * <li>'-': Creates a separator element (equivalent to {@link #addSeparator})</li>
 442      * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
 443      * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
 444      * </ul>
 445      * @param {Mixed} arg2
 446      * @param {Mixed} etc.
 447      * @method add
 448      */
 449
 450     // private
 451     lookupComponent : function(c){
 452         if(Ext.isString(c)){
 453             if(c == '-'){
 454                 c = new T.Separator();
 455             }else if(c == ' '){
 456                 c = new T.Spacer();
 457             }else if(c == '->'){
 458                 c = new T.Fill();
 459             }else{
 460                 c = new T.TextItem(c);
 461             }
 462             this.applyDefaults(c);
 463         }else{
 464             if(c.isFormField || c.render){ // some kind of form field, some kind of Toolbar.Item
 465                 c = this.createComponent(c);
 466             }else if(c.tag){ // DomHelper spec
 467                 c = new T.Item({autoEl: c});
 468             }else if(c.tagName){ // element
 469                 c = new T.Item({el:c});
 470             }else if(Ext.isObject(c)){ // must be button config?
 471                 c = c.xtype ? this.createComponent(c) : this.constructButton(c);
 472             }
 473         }
 474         return c;
 475     },
 476
 477     // private
 478     applyDefaults : function(c){
 479         if(!Ext.isString(c)){
 480             c = Ext.Toolbar.superclass.applyDefaults.call(this, c);
 481             var d = this.internalDefaults;
 482             if(c.events){
 483                 Ext.applyIf(c.initialConfig, d);
 484                 Ext.apply(c, d);
 485             }else{
 486                 Ext.applyIf(c, d);
 487             }
 488         }
 489         return c;
 490     },
 491
 492     <div id="method-Ext.Toolbar-addSeparator"></div>/**
 493      * Adds a separator
 494      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 495      * @return {Ext.Toolbar.Item} The separator {@link Ext.Toolbar.Item item}
 496      */
 497     addSeparator : function(){
 498         return this.add(new T.Separator());
 499     },
 500
 501     <div id="method-Ext.Toolbar-addSpacer"></div>/**
 502      * Adds a spacer element
 503      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 504      * @return {Ext.Toolbar.Spacer} The spacer item
 505      */
 506     addSpacer : function(){
 507         return this.add(new T.Spacer());
 508     },
 509
 510     <div id="method-Ext.Toolbar-addFill"></div>/**
 511      * Forces subsequent additions into the float:right toolbar
 512      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 513      */
 514     addFill : function(){
 515         this.add(new T.Fill());
 516     },
 517
 518     <div id="method-Ext.Toolbar-addElement"></div>/**
 519      * Adds any standard HTML element to the toolbar
 520      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 521      * @param {Mixed} el The element or id of the element to add
 522      * @return {Ext.Toolbar.Item} The element's item
 523      */
 524     addElement : function(el){
 525         return this.addItem(new T.Item({el:el}));
 526     },
 527
 528     <div id="method-Ext.Toolbar-addItem"></div>/**
 529      * Adds any Toolbar.Item or subclass
 530      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 531      * @param {Ext.Toolbar.Item} item
 532      * @return {Ext.Toolbar.Item} The item
 533      */
 534     addItem : function(item){
 535         return this.add.apply(this, arguments);
 536     },
 537
 538     <div id="method-Ext.Toolbar-addButton"></div>/**
 539      * Adds a button (or buttons). See {@link Ext.Button} for more info on the config.
 540      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 541      * @param {Object/Array} config A button config or array of configs
 542      * @return {Ext.Button/Array}
 543      */
 544     addButton : function(config){
 545         if(Ext.isArray(config)){
 546             var buttons = [];
 547             for(var i = 0, len = config.length; i < len; i++) {
 548                 buttons.push(this.addButton(config[i]));
 549             }
 550             return buttons;
 551         }
 552         return this.add(this.constructButton(config));
 553     },
 554
 555     <div id="method-Ext.Toolbar-addText"></div>/**
 556      * Adds text to the toolbar
 557      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 558      * @param {String} text The text to add
 559      * @return {Ext.Toolbar.Item} The element's item
 560      */
 561     addText : function(text){
 562         return this.addItem(new T.TextItem(text));
 563     },
 564
 565     <div id="method-Ext.Toolbar-addDom"></div>/**
 566      * Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config
 567      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 568      * @param {Object} config
 569      * @return {Ext.Toolbar.Item} The element's item
 570      */
 571     addDom : function(config){
 572         return this.add(new T.Item({autoEl: config}));
 573     },
 574
 575     <div id="method-Ext.Toolbar-addField"></div>/**
 576      * Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have
 577      * been rendered yet. For a field that has already been rendered, use {@link #addElement}.
 578      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 579      * @param {Ext.form.Field} field
 580      * @return {Ext.Toolbar.Item}
 581      */
 582     addField : function(field){
 583         return this.add(field);
 584     },
 585
 586     <div id="method-Ext.Toolbar-insertButton"></div>/**
 587      * Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Button} at the specified index.
 588      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 589      * @param {Number} index The index where the item is to be inserted
 590      * @param {Object/Ext.Toolbar.Item/Ext.Button/Array} item The button, or button config object to be
 591      * inserted, or an array of buttons/configs.
 592      * @return {Ext.Button/Item}
 593      */
 594     insertButton : function(index, item){
 595         if(Ext.isArray(item)){
 596             var buttons = [];
 597             for(var i = 0, len = item.length; i < len; i++) {
 598                buttons.push(this.insertButton(index + i, item[i]));
 599             }
 600             return buttons;
 601         }
 602         return Ext.Toolbar.superclass.insert.call(this, index, item);
 603     },
 604
 605     // private
 606     trackMenu : function(item, remove){
 607         if(this.trackMenus && item.menu){
 608             var method = remove ? 'mun' : 'mon';
 609             this[method](item, 'menutriggerover', this.onButtonTriggerOver, this);
 610             this[method](item, 'menushow', this.onButtonMenuShow, this);
 611             this[method](item, 'menuhide', this.onButtonMenuHide, this);
 612         }
 613     },
 614
 615     // private
 616     constructButton : function(item){
 617         var b = item.events ? item : this.createComponent(item, item.split ? 'splitbutton' : this.defaultType);
 618         return b;
 619     },
 620
 621     // private
 622     onAdd : function(c){
 623         Ext.Toolbar.superclass.onAdd.call(this);
 624         this.trackMenu(c);
 625     },
 626
 627     // private
 628     onRemove : function(c){
 629         Ext.Toolbar.superclass.onRemove.call(this);
 630         this.trackMenu(c, true);
 631     },
 632
 633     // private
 634     onDisable : function(){
 635         this.items.each(function(item){
 636              if(item.disable){
 637                  item.disable();
 638              }
 639         });
 640     },
 641
 642     // private
 643     onEnable : function(){
 644         this.items.each(function(item){
 645              if(item.enable){
 646                  item.enable();
 647              }
 648         });
 649     },
 650
 651     // private
 652     onButtonTriggerOver : function(btn){
 653         if(this.activeMenuBtn && this.activeMenuBtn != btn){
 654             this.activeMenuBtn.hideMenu();
 655             btn.showMenu();
 656             this.activeMenuBtn = btn;
 657         }
 658     },
 659
 660     // private
 661     onButtonMenuShow : function(btn){
 662         this.activeMenuBtn = btn;
 663     },
 664
 665     // private
 666     onButtonMenuHide : function(btn){
 667         delete this.activeMenuBtn;
 668     }
 669 });
 670 Ext.reg('toolbar', Ext.Toolbar);
 671
 672 <div id="cls-Ext.Toolbar.Item"></div>/**
 673  * @class Ext.Toolbar.Item
 674  * @extends Ext.BoxComponent
 675  * The base class that other non-interacting Toolbar Item classes should extend in order to
 676  * get some basic common toolbar item functionality.
 677  * @constructor
 678  * Creates a new Item
 679  * @param {HTMLElement} el
 680  * @xtype tbitem
 681  */
 682 T.Item = Ext.extend(Ext.BoxComponent, {
 683     hideParent: true, //  Hiding a Toolbar.Item hides its containing TD
 684     enable:Ext.emptyFn,
 685     disable:Ext.emptyFn,
 686     focus:Ext.emptyFn
 687     <div id="cfg-Ext.Toolbar.Item-overflowText"></div>/**
 688      * @cfg {String} overflowText Text to be used for the menu if the item is overflowed.
 689      */
 690 });
 691 Ext.reg('tbitem', T.Item);
 692
 693 <div id="cls-Ext.Toolbar.Separator"></div>/**
 694  * @class Ext.Toolbar.Separator
 695  * @extends Ext.Toolbar.Item
 696  * A simple class that adds a vertical separator bar between toolbar items
 697  * (css class:<tt>'xtb-sep'</tt>). Example usage:
 698  * <pre><code>
 699 new Ext.Panel({
 700     tbar : [
 701         'Item 1',
 702         {xtype: 'tbseparator'}, // or '-'
 703         'Item 2'
 704     ]
 705 });
 706 </code></pre>
 707  * @constructor
 708  * Creates a new Separator
 709  * @xtype tbseparator
 710  */
 711 T.Separator = Ext.extend(T.Item, {
 712     onRender : function(ct, position){
 713         this.el = ct.createChild({tag:'span', cls:'xtb-sep'}, position);
 714     }
 715 });
 716 Ext.reg('tbseparator', T.Separator);
 717
 718 <div id="cls-Ext.Toolbar.Spacer"></div>/**
 719  * @class Ext.Toolbar.Spacer
 720  * @extends Ext.Toolbar.Item
 721  * A simple element that adds extra horizontal space between items in a toolbar.
 722  * By default a 2px wide space is added via css specification:<pre><code>
 723 .x-toolbar .xtb-spacer {
 724     width:2px;
 725 }
 726  * </code></pre>
 727  * <p>Example usage:</p>
 728  * <pre><code>
 729 new Ext.Panel({
 730     tbar : [
 731         'Item 1',
 732         {xtype: 'tbspacer'}, // or ' '
 733         'Item 2',
 734         // space width is also configurable via javascript
 735         {xtype: 'tbspacer', width: 50}, // add a 50px space
 736         'Item 3'
 737     ]
 738 });
 739 </code></pre>
 740  * @constructor
 741  * Creates a new Spacer
 742  * @xtype tbspacer
 743  */
 744 T.Spacer = Ext.extend(T.Item, {
 745     <div id="cfg-Ext.Toolbar.Spacer-width"></div>/**
 746      * @cfg {Number} width
 747      * The width of the spacer in pixels (defaults to 2px via css style <tt>.x-toolbar .xtb-spacer</tt>).
 748      */
 749
 750     onRender : function(ct, position){
 751         this.el = ct.createChild({tag:'div', cls:'xtb-spacer', style: this.width?'width:'+this.width+'px':''}, position);
 752     }
 753 });
 754 Ext.reg('tbspacer', T.Spacer);
 755
 756 <div id="cls-Ext.Toolbar.Fill"></div>/**
 757  * @class Ext.Toolbar.Fill
 758  * @extends Ext.Toolbar.Spacer
 759  * A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
 760  * the right-justified button container.
 761  * <pre><code>
 762 new Ext.Panel({
 763     tbar : [
 764         'Item 1',
 765         {xtype: 'tbfill'}, // or '->'
 766         'Item 2'
 767     ]
 768 });
 769 </code></pre>
 770  * @constructor
 771  * Creates a new Fill
 772  * @xtype tbfill
 773  */
 774 T.Fill = Ext.extend(T.Item, {
 775     // private
 776     render : Ext.emptyFn,
 777     isFill : true
 778 });
 779 Ext.reg('tbfill', T.Fill);
 780
 781 <div id="cls-Ext.Toolbar.TextItem"></div>/**
 782  * @class Ext.Toolbar.TextItem
 783  * @extends Ext.Toolbar.Item
 784  * A simple class that renders text directly into a toolbar
 785  * (with css class:<tt>'xtb-text'</tt>). Example usage:
 786  * <pre><code>
 787 new Ext.Panel({
 788     tbar : [
 789         {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
 790     ]
 791 });
 792 </code></pre>
 793  * @constructor
 794  * Creates a new TextItem
 795  * @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property
 796  * @xtype tbtext
 797  */
 798 T.TextItem = Ext.extend(T.Item, {
 799     <div id="cfg-Ext.Toolbar.TextItem-text"></div>/**
 800      * @cfg {String} text The text to be used as innerHTML (html tags are accepted)
 801      */
 802
 803     constructor: function(config){
 804         T.TextItem.superclass.constructor.call(this, Ext.isString(config) ? {text: config} : config);
 805     },
 806
 807     // private
 808     onRender : function(ct, position) {
 809         this.autoEl = {cls: 'xtb-text', html: this.text || ''};
 810         T.TextItem.superclass.onRender.call(this, ct, position);
 811     },
 812
 813     <div id="method-Ext.Toolbar.TextItem-setText"></div>/**
 814      * Updates this item's text, setting the text to be used as innerHTML.
 815      * @param {String} t The text to display (html accepted).
 816      */
 817     setText : function(t) {
 818         if(this.rendered){
 819             this.el.update(t);
 820         }else{
 821             this.text = t;
 822         }
 823     }
 824 });
 825 Ext.reg('tbtext', T.TextItem);
 826
 827 // backwards compat
 828 T.Button = Ext.extend(Ext.Button, {});
 829 T.SplitButton = Ext.extend(Ext.SplitButton, {});
 830 Ext.reg('tbbutton', T.Button);
 831 Ext.reg('tbsplit', T.SplitButton);
 832
 833 })();
 834 </pre>    \r
 835 </body>\r
 836 </html>