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.2.2
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.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 <code>true<code> 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         this.trackMenu(c, true);
 388     },
 389
 390     // private
 391     onDisable : function(){
 392         this.items.each(function(item){
 393              if(item.disable){
 394                  item.disable();
 395              }
 396         });
 397     },
 398
 399     // private
 400     onEnable : function(){
 401         this.items.each(function(item){
 402              if(item.enable){
 403                  item.enable();
 404              }
 405         });
 406     },
 407
 408     // private
 409     onButtonTriggerOver : function(btn){
 410         if(this.activeMenuBtn && this.activeMenuBtn != btn){
 411             this.activeMenuBtn.hideMenu();
 412             btn.showMenu();
 413             this.activeMenuBtn = btn;
 414         }
 415     },
 416
 417     // private
 418     onButtonMenuShow : function(btn){
 419         this.activeMenuBtn = btn;
 420     },
 421
 422     // private
 423     onButtonMenuHide : function(btn){
 424         delete this.activeMenuBtn;
 425     }
 426 });
 427 Ext.reg('toolbar', Ext.Toolbar);
 428
 429 <div id="cls-Ext.Toolbar.Item"></div>/**
 430  * @class Ext.Toolbar.Item
 431  * @extends Ext.BoxComponent
 432  * The base class that other non-interacting Toolbar Item classes should extend in order to
 433  * get some basic common toolbar item functionality.
 434  * @constructor
 435  * Creates a new Item
 436  * @param {HTMLElement} el
 437  * @xtype tbitem
 438  */
 439 T.Item = Ext.extend(Ext.BoxComponent, {
 440     hideParent: true, //  Hiding a Toolbar.Item hides its containing TD
 441     enable:Ext.emptyFn,
 442     disable:Ext.emptyFn,
 443     focus:Ext.emptyFn
 444     <div id="cfg-Ext.Toolbar.Item-overflowText"></div>/**
 445      * @cfg {String} overflowText Text to be used for the menu if the item is overflowed.
 446      */
 447 });
 448 Ext.reg('tbitem', T.Item);
 449
 450 <div id="cls-Ext.Toolbar.Separator"></div>/**
 451  * @class Ext.Toolbar.Separator
 452  * @extends Ext.Toolbar.Item
 453  * A simple class that adds a vertical separator bar between toolbar items
 454  * (css class:<tt>'xtb-sep'</tt>). Example usage:
 455  * <pre><code>
 456 new Ext.Panel({
 457     tbar : [
 458         'Item 1',
 459         {xtype: 'tbseparator'}, // or '-'
 460         'Item 2'
 461     ]
 462 });
 463 </code></pre>
 464  * @constructor
 465  * Creates a new Separator
 466  * @xtype tbseparator
 467  */
 468 T.Separator = Ext.extend(T.Item, {
 469     onRender : function(ct, position){
 470         this.el = ct.createChild({tag:'span', cls:'xtb-sep'}, position);
 471     }
 472 });
 473 Ext.reg('tbseparator', T.Separator);
 474
 475 <div id="cls-Ext.Toolbar.Spacer"></div>/**
 476  * @class Ext.Toolbar.Spacer
 477  * @extends Ext.Toolbar.Item
 478  * A simple element that adds extra horizontal space between items in a toolbar.
 479  * By default a 2px wide space is added via css specification:<pre><code>
 480 .x-toolbar .xtb-spacer {
 481     width:2px;
 482 }
 483  * </code></pre>
 484  * <p>Example usage:</p>
 485  * <pre><code>
 486 new Ext.Panel({
 487     tbar : [
 488         'Item 1',
 489         {xtype: 'tbspacer'}, // or ' '
 490         'Item 2',
 491         // space width is also configurable via javascript
 492         {xtype: 'tbspacer', width: 50}, // add a 50px space
 493         'Item 3'
 494     ]
 495 });
 496 </code></pre>
 497  * @constructor
 498  * Creates a new Spacer
 499  * @xtype tbspacer
 500  */
 501 T.Spacer = Ext.extend(T.Item, {
 502     <div id="cfg-Ext.Toolbar.Spacer-width"></div>/**
 503      * @cfg {Number} width
 504      * The width of the spacer in pixels (defaults to 2px via css style <tt>.x-toolbar .xtb-spacer</tt>).
 505      */
 506
 507     onRender : function(ct, position){
 508         this.el = ct.createChild({tag:'div', cls:'xtb-spacer', style: this.width?'width:'+this.width+'px':''}, position);
 509     }
 510 });
 511 Ext.reg('tbspacer', T.Spacer);
 512
 513 <div id="cls-Ext.Toolbar.Fill"></div>/**
 514  * @class Ext.Toolbar.Fill
 515  * @extends Ext.Toolbar.Spacer
 516  * A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
 517  * the right-justified button container.
 518  * <pre><code>
 519 new Ext.Panel({
 520     tbar : [
 521         'Item 1',
 522         {xtype: 'tbfill'}, // or '->'
 523         'Item 2'
 524     ]
 525 });
 526 </code></pre>
 527  * @constructor
 528  * Creates a new Fill
 529  * @xtype tbfill
 530  */
 531 T.Fill = Ext.extend(T.Item, {
 532     // private
 533     render : Ext.emptyFn,
 534     isFill : true
 535 });
 536 Ext.reg('tbfill', T.Fill);
 537
 538 <div id="cls-Ext.Toolbar.TextItem"></div>/**
 539  * @class Ext.Toolbar.TextItem
 540  * @extends Ext.Toolbar.Item
 541  * A simple class that renders text directly into a toolbar
 542  * (with css class:<tt>'xtb-text'</tt>). Example usage:
 543  * <pre><code>
 544 new Ext.Panel({
 545     tbar : [
 546         {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
 547     ]
 548 });
 549 </code></pre>
 550  * @constructor
 551  * Creates a new TextItem
 552  * @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property
 553  * @xtype tbtext
 554  */
 555 T.TextItem = Ext.extend(T.Item, {
 556     <div id="cfg-Ext.Toolbar.TextItem-text"></div>/**
 557      * @cfg {String} text The text to be used as innerHTML (html tags are accepted)
 558      */
 559
 560     constructor: function(config){
 561         T.TextItem.superclass.constructor.call(this, Ext.isString(config) ? {text: config} : config);
 562     },
 563
 564     // private
 565     onRender : function(ct, position) {
 566         this.autoEl = {cls: 'xtb-text', html: this.text || ''};
 567         T.TextItem.superclass.onRender.call(this, ct, position);
 568     },
 569
 570     <div id="method-Ext.Toolbar.TextItem-setText"></div>/**
 571      * Updates this item's text, setting the text to be used as innerHTML.
 572      * @param {String} t The text to display (html accepted).
 573      */
 574     setText : function(t) {
 575         if(this.rendered){
 576             this.el.update(t);
 577         }else{
 578             this.text = t;
 579         }
 580     }
 581 });
 582 Ext.reg('tbtext', T.TextItem);
 583
 584 // backwards compat
 585 T.Button = Ext.extend(Ext.Button, {});
 586 T.SplitButton = Ext.extend(Ext.SplitButton, {});
 587 Ext.reg('tbbutton', T.Button);
 588 Ext.reg('tbsplit', T.SplitButton);
 589
 590 })();
 591 </pre>
 592 </body>
 593 </html>