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