docs/source/Toolbar.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 <div id="cls-Ext.Toolbar"></div>/**
  16  * @class Ext.Toolbar
  17  * @extends Ext.Container
  18  * <p>Basic Toolbar class. Although the <tt>{@link Ext.Container#defaultType defaultType}</tt> for Toolbar
  19  * is <tt>{@link Ext.Button button}</tt>, Toolbar elements (child items for the Toolbar container) may
  20  * be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
  21  * or implicitly via their xtypes, and can be <tt>{@link #add}</tt>ed dynamically.</p>
  22  * <p>Some items have shortcut strings for creation:</p>
  23  * <pre>
  24 <u>Shortcut</u>  <u>xtype</u>          <u>Class</u>                  <u>Description</u>
  25 '->'      'tbfill'       {@link Ext.Toolbar.Fill}       begin using the right-justified button container
  26 '-'       'tbseparator'  {@link Ext.Toolbar.Separator}  add a vertical separator bar between toolbar items
  27 ' '       'tbspacer'     {@link Ext.Toolbar.Spacer}     add horiztonal space between elements
  28  * </pre>
  29  *
  30  * Example usage of various elements:
  31  * <pre><code>
  32 var tb = new Ext.Toolbar({
  33     renderTo: document.body,
  34     width: 600,
  35     height: 100,
  36     items: [
  37         {
  38             // xtype: 'button', // default for Toolbars, same as 'tbbutton'
  39             text: 'Button'
  40         },
  41         {
  42             xtype: 'splitbutton', // same as 'tbsplitbutton'
  43             text: 'Split Button'
  44         },
  45         // begin using the right-justified button container
  46         '->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
  47         {
  48             xtype: 'textfield',
  49             name: 'field1',
  50             emptyText: 'enter search term'
  51         },
  52         // add a vertical separator bar between toolbar items
  53         '-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
  54         'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem
  55         {xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer
  56         'text 2',
  57         {xtype: 'tbspacer', width: 50}, // add a 50px space
  58         'text 3'
  59     ]
  60 });
  61  * </code></pre>
  62  * Example adding a ComboBox within a menu of a button:
  63  * <pre><code>
  64 // ComboBox creation
  65 var combo = new Ext.form.ComboBox({
  66     store: new Ext.data.ArrayStore({
  67         autoDestroy: true,
  68         fields: ['initials', 'fullname'],
  69         data : [
  70             ['FF', 'Fred Flintstone'],
  71             ['BR', 'Barney Rubble']
  72         ]
  73     }),
  74     displayField: 'fullname',
  75     typeAhead: true,
  76     mode: 'local',
  77     forceSelection: true,
  78     triggerAction: 'all',
  79     emptyText: 'Select a name...',
  80     selectOnFocus: true,
  81     width: 135,
  82     getListParent: function() {
  83         return this.el.up('.x-menu');
  84     },
  85     iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
  86 });
  87
  88 // put ComboBox in a Menu
  89 var menu = new Ext.menu.Menu({
  90     id: 'mainMenu',
  91     items: [
  92         combo // A Field in a Menu
  93     ]
  94 });
  95
  96 // add a Button with the menu
  97 tb.add({
  98         text:'Button w/ Menu',
  99         menu: menu  // assign menu by instance
 100     });
 101 tb.doLayout();
 102  * </code></pre>
 103  * @constructor
 104  * Creates a new Toolbar
 105  * @param {Object/Array} config A config object or an array of buttons to <tt>{@link #add}</tt>
 106  * @xtype toolbar
 107  */
 108 Ext.Toolbar = function(config){
 109     if(Ext.isArray(config)){
 110         config = {items: config, layout: 'toolbar'};
 111     } else {
 112         config = Ext.apply({
 113             layout: 'toolbar'
 114         }, config);
 115         if(config.buttons) {
 116             config.items = config.buttons;
 117         }
 118     }
 119     Ext.Toolbar.superclass.constructor.call(this, config);
 120 };
 121
 122 (function(){
 123
 124 var T = Ext.Toolbar;
 125
 126 Ext.extend(T, Ext.Container, {
 127
 128     defaultType: 'button',
 129
 130     <div id="cfg-Ext.Toolbar-layout"></div>/**
 131      * @cfg {String/Object} layout
 132      * This class assigns a default layout (<code>layout:'<b>toolbar</b>'</code>).
 133      * Developers <i>may</i> override this configuration option if another layout
 134      * is required (the constructor must be passed a configuration object in this
 135      * case instead of an array).
 136      * See {@link Ext.Container#layout} for additional information.
 137      */
 138
 139     enableOverflow : false,
 140
 141     <div id="cfg-Ext.Toolbar-enableOverflow"></div>/**
 142      * @cfg {Boolean} enableOverflow
 143      * Defaults to false. Configure <tt>true</tt> to make the toolbar provide a button
 144      * which activates a dropdown Menu to show items which overflow the Toolbar's width.
 145      */
 146     <div id="cfg-Ext.Toolbar-buttonAlign"></div>/**
 147      * @cfg {String} buttonAlign
 148      * <p>The default position at which to align child items. Defaults to <code>"left"</code></p>
 149      * <p>May be specified as <code>"center"</code> to cause items added before a Fill (A <code>"->"</code>) item
 150      * to be centered in the Toolbar. Items added after a Fill are still right-aligned.</p>
 151      * <p>Specify as <code>"right"</code> to right align all child items.</p>
 152      */
 153
 154     trackMenus : true,
 155     internalDefaults: {removeMode: 'container', hideParent: true},
 156     toolbarCls: 'x-toolbar',
 157
 158     initComponent : function(){
 159         T.superclass.initComponent.call(this);
 160
 161         <div id="event-Ext.Toolbar-overflowchange"></div>/**
 162          * @event overflowchange
 163          * Fires after the overflow state has changed.
 164          * @param {Object} c The Container
 165          * @param {Boolean} lastOverflow overflow state
 166          */
 167         this.addEvents('overflowchange');
 168     },
 169
 170     // private
 171     onRender : function(ct, position){
 172         if(!this.el){
 173             if(!this.autoCreate){
 174                 this.autoCreate = {
 175                     cls: this.toolbarCls + ' x-small-editor'
 176                 };
 177             }
 178             this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
 179             Ext.Toolbar.superclass.onRender.apply(this, arguments);
 180         }
 181     },
 182
 183     <div id="method-Ext.Toolbar-add"></div>/**
 184      * <p>Adds element(s) to the toolbar -- this function takes a variable number of
 185      * arguments of mixed type and adds them to the toolbar.</p>
 186      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 187      * @param {Mixed} arg1 The following types of arguments are all valid:<br />
 188      * <ul>
 189      * <li>{@link Ext.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
 190      * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
 191      * <li>Field: Any form field (equivalent to {@link #addField})</li>
 192      * <li>Item: Any subclass of {@link Ext.Toolbar.Item} (equivalent to {@link #addItem})</li>
 193      * <li>String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}).
 194      * Note that there are a few special strings that are treated differently as explained next.</li>
 195      * <li>'-': Creates a separator element (equivalent to {@link #addSeparator})</li>
 196      * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
 197      * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
 198      * </ul>
 199      * @param {Mixed} arg2
 200      * @param {Mixed} etc.
 201      * @method add
 202      */
 203
 204     // private
 205     lookupComponent : function(c){
 206         if(Ext.isString(c)){
 207             if(c == '-'){
 208                 c = new T.Separator();
 209             }else if(c == ' '){
 210                 c = new T.Spacer();
 211             }else if(c == '->'){
 212                 c = new T.Fill();
 213             }else{
 214                 c = new T.TextItem(c);
 215             }
 216             this.applyDefaults(c);
 217         }else{
 218             if(c.isFormField || c.render){ // some kind of form field, some kind of Toolbar.Item
 219                 c = this.createComponent(c);
 220             }else if(c.tag){ // DomHelper spec
 221                 c = new T.Item({autoEl: c});
 222             }else if(c.tagName){ // element
 223                 c = new T.Item({el:c});
 224             }else if(Ext.isObject(c)){ // must be button config?
 225                 c = c.xtype ? this.createComponent(c) : this.constructButton(c);
 226             }
 227         }
 228         return c;
 229     },
 230
 231     // private
 232     applyDefaults : function(c){
 233         if(!Ext.isString(c)){
 234             c = Ext.Toolbar.superclass.applyDefaults.call(this, c);
 235             var d = this.internalDefaults;
 236             if(c.events){
 237                 Ext.applyIf(c.initialConfig, d);
 238                 Ext.apply(c, d);
 239             }else{
 240                 Ext.applyIf(c, d);
 241             }
 242         }
 243         return c;
 244     },
 245
 246     <div id="method-Ext.Toolbar-addSeparator"></div>/**
 247      * Adds a separator
 248      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 249      * @return {Ext.Toolbar.Item} The separator {@link Ext.Toolbar.Item item}
 250      */
 251     addSeparator : function(){
 252         return this.add(new T.Separator());
 253     },
 254
 255     <div id="method-Ext.Toolbar-addSpacer"></div>/**
 256      * Adds a spacer element
 257      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 258      * @return {Ext.Toolbar.Spacer} The spacer item
 259      */
 260     addSpacer : function(){
 261         return this.add(new T.Spacer());
 262     },
 263
 264     <div id="method-Ext.Toolbar-addFill"></div>/**
 265      * Forces subsequent additions into the float:right toolbar
 266      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 267      */
 268     addFill : function(){
 269         this.add(new T.Fill());
 270     },
 271
 272     <div id="method-Ext.Toolbar-addElement"></div>/**
 273      * Adds any standard HTML element to the toolbar
 274      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 275      * @param {Mixed} el The element or id of the element to add
 276      * @return {Ext.Toolbar.Item} The element's item
 277      */
 278     addElement : function(el){
 279         return this.addItem(new T.Item({el:el}));
 280     },
 281
 282     <div id="method-Ext.Toolbar-addItem"></div>/**
 283      * Adds any Toolbar.Item or subclass
 284      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 285      * @param {Ext.Toolbar.Item} item
 286      * @return {Ext.Toolbar.Item} The item
 287      */
 288     addItem : function(item){
 289         return this.add.apply(this, arguments);
 290     },
 291
 292     <div id="method-Ext.Toolbar-addButton"></div>/**
 293      * Adds a button (or buttons). See {@link Ext.Button} for more info on the config.
 294      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 295      * @param {Object/Array} config A button config or array of configs
 296      * @return {Ext.Button/Array}
 297      */
 298     addButton : function(config){
 299         if(Ext.isArray(config)){
 300             var buttons = [];
 301             for(var i = 0, len = config.length; i < len; i++) {
 302                 buttons.push(this.addButton(config[i]));
 303             }
 304             return buttons;
 305         }
 306         return this.add(this.constructButton(config));
 307     },
 308
 309     <div id="method-Ext.Toolbar-addText"></div>/**
 310      * Adds text to the toolbar
 311      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 312      * @param {String} text The text to add
 313      * @return {Ext.Toolbar.Item} The element's item
 314      */
 315     addText : function(text){
 316         return this.addItem(new T.TextItem(text));
 317     },
 318
 319     <div id="method-Ext.Toolbar-addDom"></div>/**
 320      * Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config
 321      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 322      * @param {Object} config
 323      * @return {Ext.Toolbar.Item} The element's item
 324      */
 325     addDom : function(config){
 326         return this.add(new T.Item({autoEl: config}));
 327     },
 328
 329     <div id="method-Ext.Toolbar-addField"></div>/**
 330      * Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have
 331      * been rendered yet. For a field that has already been rendered, use {@link #addElement}.
 332      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 333      * @param {Ext.form.Field} field
 334      * @return {Ext.Toolbar.Item}
 335      */
 336     addField : function(field){
 337         return this.add(field);
 338     },
 339
 340     <div id="method-Ext.Toolbar-insertButton"></div>/**
 341      * Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Button} at the specified index.
 342      * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
 343      * @param {Number} index The index where the item is to be inserted
 344      * @param {Object/Ext.Toolbar.Item/Ext.Button/Array} item The button, or button config object to be
 345      * inserted, or an array of buttons/configs.
 346      * @return {Ext.Button/Item}
 347      */
 348     insertButton : function(index, item){
 349         if(Ext.isArray(item)){
 350             var buttons = [];
 351             for(var i = 0, len = item.length; i < len; i++) {
 352                buttons.push(this.insertButton(index + i, item[i]));
 353             }
 354             return buttons;
 355         }
 356         return Ext.Toolbar.superclass.insert.call(this, index, item);
 357     },
 358
 359     // private
 360     trackMenu : function(item, remove){
 361         if(this.trackMenus && item.menu){
 362             var method = remove ? 'mun' : 'mon';
 363             this[method](item, 'menutriggerover', this.onButtonTriggerOver, this);
 364             this[method](item, 'menushow', this.onButtonMenuShow, this);
 365             this[method](item, 'menuhide', this.onButtonMenuHide, this);
 366         }
 367     },
 368
 369     // private
 370     constructButton : function(item){
 371         var b = item.events ? item : this.createComponent(item, item.split ? 'splitbutton' : this.defaultType);
 372         return b;
 373     },
 374
 375     // private
 376     onAdd : function(c){
 377         Ext.Toolbar.superclass.onAdd.call(this);
 378         this.trackMenu(c);
 379         if(this.disabled){
 380             c.disable();
 381         }
 382     },
 383
 384     // private
 385     onRemove : function(c){
 386         Ext.Toolbar.superclass.onRemove.call(this);
 387         if (c == this.activeMenuBtn) {
 388             delete this.activeMenuBtn;
 389         }
 390         this.trackMenu(c, true);
 391     },
 392
 393     // private
 394     onDisable : function(){
 395         this.items.each(function(item){
 396              if(item.disable){
 397                  item.disable();
 398              }
 399         });
 400     },
 401
 402     // private
 403     onEnable : function(){
 404         this.items.each(function(item){
 405              if(item.enable){
 406                  item.enable();
 407              }
 408         });
 409     },
 410
 411     // private
 412     onButtonTriggerOver : function(btn){
 413         if(this.activeMenuBtn && this.activeMenuBtn != btn){
 414             this.activeMenuBtn.hideMenu();
 415             btn.showMenu();
 416             this.activeMenuBtn = btn;
 417         }
 418     },
 419
 420     // private
 421     onButtonMenuShow : function(btn){
 422         this.activeMenuBtn = btn;
 423     },
 424
 425     // private
 426     onButtonMenuHide : function(btn){
 427         delete this.activeMenuBtn;
 428     }
 429 });
 430 Ext.reg('toolbar', Ext.Toolbar);
 431
 432 <div id="cls-Ext.Toolbar.Item"></div>/**
 433  * @class Ext.Toolbar.Item
 434  * @extends Ext.BoxComponent
 435  * The base class that other non-interacting Toolbar Item classes should extend in order to
 436  * get some basic common toolbar item functionality.
 437  * @constructor
 438  * Creates a new Item
 439  * @param {HTMLElement} el
 440  * @xtype tbitem
 441  */
 442 T.Item = Ext.extend(Ext.BoxComponent, {
 443     hideParent: true, //  Hiding a Toolbar.Item hides its containing TD
 444     enable:Ext.emptyFn,
 445     disable:Ext.emptyFn,
 446     focus:Ext.emptyFn
 447     <div id="cfg-Ext.Toolbar.Item-overflowText"></div>/**
 448      * @cfg {String} overflowText Text to be used for the menu if the item is overflowed.
 449      */
 450 });
 451 Ext.reg('tbitem', T.Item);
 452
 453 <div id="cls-Ext.Toolbar.Separator"></div>/**
 454  * @class Ext.Toolbar.Separator
 455  * @extends Ext.Toolbar.Item
 456  * A simple class that adds a vertical separator bar between toolbar items
 457  * (css class:<tt>'xtb-sep'</tt>). Example usage:
 458  * <pre><code>
 459 new Ext.Panel({
 460     tbar : [
 461         'Item 1',
 462         {xtype: 'tbseparator'}, // or '-'
 463         'Item 2'
 464     ]
 465 });
 466 </code></pre>
 467  * @constructor
 468  * Creates a new Separator
 469  * @xtype tbseparator
 470  */
 471 T.Separator = Ext.extend(T.Item, {
 472     onRender : function(ct, position){
 473         this.el = ct.createChild({tag:'span', cls:'xtb-sep'}, position);
 474     }
 475 });
 476 Ext.reg('tbseparator', T.Separator);
 477
 478 <div id="cls-Ext.Toolbar.Spacer"></div>/**
 479  * @class Ext.Toolbar.Spacer
 480  * @extends Ext.Toolbar.Item
 481  * A simple element that adds extra horizontal space between items in a toolbar.
 482  * By default a 2px wide space is added via css specification:<pre><code>
 483 .x-toolbar .xtb-spacer {
 484     width:2px;
 485 }
 486  * </code></pre>
 487  * <p>Example usage:</p>
 488  * <pre><code>
 489 new Ext.Panel({
 490     tbar : [
 491         'Item 1',
 492         {xtype: 'tbspacer'}, // or ' '
 493         'Item 2',
 494         // space width is also configurable via javascript
 495         {xtype: 'tbspacer', width: 50}, // add a 50px space
 496         'Item 3'
 497     ]
 498 });
 499 </code></pre>
 500  * @constructor
 501  * Creates a new Spacer
 502  * @xtype tbspacer
 503  */
 504 T.Spacer = Ext.extend(T.Item, {
 505     <div id="cfg-Ext.Toolbar.Spacer-width"></div>/**
 506      * @cfg {Number} width
 507      * The width of the spacer in pixels (defaults to 2px via css style <tt>.x-toolbar .xtb-spacer</tt>).
 508      */
 509
 510     onRender : function(ct, position){
 511         this.el = ct.createChild({tag:'div', cls:'xtb-spacer', style: this.width?'width:'+this.width+'px':''}, position);
 512     }
 513 });
 514 Ext.reg('tbspacer', T.Spacer);
 515
 516 <div id="cls-Ext.Toolbar.Fill"></div>/**
 517  * @class Ext.Toolbar.Fill
 518  * @extends Ext.Toolbar.Spacer
 519  * A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
 520  * the right-justified button container.
 521  * <pre><code>
 522 new Ext.Panel({
 523     tbar : [
 524         'Item 1',
 525         {xtype: 'tbfill'}, // or '->'
 526         'Item 2'
 527     ]
 528 });
 529 </code></pre>
 530  * @constructor
 531  * Creates a new Fill
 532  * @xtype tbfill
 533  */
 534 T.Fill = Ext.extend(T.Item, {
 535     // private
 536     render : Ext.emptyFn,
 537     isFill : true
 538 });
 539 Ext.reg('tbfill', T.Fill);
 540
 541 <div id="cls-Ext.Toolbar.TextItem"></div>/**
 542  * @class Ext.Toolbar.TextItem
 543  * @extends Ext.Toolbar.Item
 544  * A simple class that renders text directly into a toolbar
 545  * (with css class:<tt>'xtb-text'</tt>). Example usage:
 546  * <pre><code>
 547 new Ext.Panel({
 548     tbar : [
 549         {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
 550     ]
 551 });
 552 </code></pre>
 553  * @constructor
 554  * Creates a new TextItem
 555  * @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property
 556  * @xtype tbtext
 557  */
 558 T.TextItem = Ext.extend(T.Item, {
 559     <div id="cfg-Ext.Toolbar.TextItem-text"></div>/**
 560      * @cfg {String} text The text to be used as innerHTML (html tags are accepted)
 561      */
 562
 563     constructor: function(config){
 564         T.TextItem.superclass.constructor.call(this, Ext.isString(config) ? {text: config} : config);
 565     },
 566
 567     // private
 568     onRender : function(ct, position) {
 569         this.autoEl = {cls: 'xtb-text', html: this.text || ''};
 570         T.TextItem.superclass.onRender.call(this, ct, position);
 571     },
 572
 573     <div id="method-Ext.Toolbar.TextItem-setText"></div>/**
 574      * Updates this item's text, setting the text to be used as innerHTML.
 575      * @param {String} t The text to display (html accepted).
 576      */
 577     setText : function(t) {
 578         if(this.rendered){
 579             this.el.update(t);
 580         }else{
 581             this.text = t;
 582         }
 583     }
 584 });
 585 Ext.reg('tbtext', T.TextItem);
 586
 587 // backwards compat
 588 T.Button = Ext.extend(Ext.Button, {});
 589 T.SplitButton = Ext.extend(Ext.SplitButton, {});
 590 Ext.reg('tbbutton', T.Button);
 591 Ext.reg('tbsplit', T.SplitButton);
 592
 593 })();
 594 </pre>
 595 </body>
 596 </html>