source/widgets/Toolbar.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.Toolbar\r
  11  * @extends Ext.BoxComponent\r
  12  * Basic Toolbar class. Toolbar elements can be created explicitly via their constructors, or implicitly\r
  13  * via their xtypes.  Some items also have shortcut strings for creation.  \r
  14  * @constructor\r
  15  * Creates a new Toolbar\r
  16  * @param {Object/Array} config A config object or an array of buttons to add\r
  17  */ \r
  18  Ext.Toolbar = function(config){\r
  19     if(Ext.isArray(config)){\r
  20         config = {buttons:config};\r
  21     }\r
  22     Ext.Toolbar.superclass.constructor.call(this, config);\r
  23 };\r
  24 \r
  25 (function(){\r
  26 \r
  27 var T = Ext.Toolbar;\r
  28 \r
  29 Ext.extend(T, Ext.BoxComponent, {\r
  30 \r
  31     trackMenus : true,\r
  32 \r
  33     // private\r
  34     initComponent : function(){\r
  35         T.superclass.initComponent.call(this);\r
  36 \r
  37         if(this.items){\r
  38             this.buttons = this.items;\r
  39         }\r
  40         /**\r
  41          * A MixedCollection of this Toolbar's items\r
  42          * @property items\r
  43          * @type Ext.util.MixedCollection\r
  44          */\r
  45         this.items = new Ext.util.MixedCollection(false, function(o){\r
  46             return o.itemId || o.id || Ext.id();\r
  47         });\r
  48     },\r
  49 \r
  50     // private\r
  51     autoCreate: {\r
  52         cls:'x-toolbar x-small-editor',\r
  53         html:'<table cellspacing="0"><tr></tr></table>'\r
  54     },\r
  55 \r
  56     // private\r
  57     onRender : function(ct, position){\r
  58         this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);\r
  59         this.tr = this.el.child("tr", true);\r
  60     },\r
  61 \r
  62     // private\r
  63     afterRender : function(){\r
  64         T.superclass.afterRender.call(this);\r
  65         if(this.buttons){\r
  66             this.add.apply(this, this.buttons);\r
  67             delete this.buttons;\r
  68         }\r
  69     },\r
  70 \r
  71     /**\r
  72      * Adds element(s) to the toolbar -- this function takes a variable number of\r
  73      * arguments of mixed type and adds them to the toolbar.\r
  74      * @param {Mixed} arg1 The following types of arguments are all valid:<br />\r
  75      * <ul>\r
  76      * <li>{@link Ext.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>\r
  77      * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>\r
  78      * <li>Field: Any form field (equivalent to {@link #addField})</li>\r
  79      * <li>Item: Any subclass of {@link Ext.Toolbar.Item} (equivalent to {@link #addItem})</li>\r
  80      * <li>String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}).\r
  81      * Note that there are a few special strings that are treated differently as explained next.</li>\r
  82      * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>\r
  83      * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>\r
  84      * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>\r
  85      * </ul>\r
  86      * @param {Mixed} arg2\r
  87      * @param {Mixed} etc.\r
  88      */\r
  89     add : function(){\r
  90         var a = arguments, l = a.length;\r
  91         for(var i = 0; i < l; i++){\r
  92             var el = a[i];\r
  93             if(el.isFormField){ // some kind of form field\r
  94                 this.addField(el);\r
  95             }else if(el.render){ // some kind of Toolbar.Item\r
  96                 this.addItem(el);\r
  97             }else if(typeof el == "string"){ // string\r
  98                 if(el == "separator" || el == "-"){\r
  99                     this.addSeparator();\r
 100                 }else if(el == " "){\r
 101                     this.addSpacer();\r
 102                 }else if(el == "->"){\r
 103                     this.addFill();\r
 104                 }else{\r
 105                     this.addText(el);\r
 106                 }\r
 107             }else if(el.tagName){ // element\r
 108                 this.addElement(el);\r
 109             }else if(typeof el == "object"){ // must be button config?\r
 110                 if(el.xtype){\r
 111                     this.addField(Ext.ComponentMgr.create(el, 'button'));\r
 112                 }else{\r
 113                     this.addButton(el);\r
 114                 }\r
 115             }\r
 116         }\r
 117     },\r
 118     \r
 119     /**\r
 120      * Adds a separator\r
 121      * @return {Ext.Toolbar.Item} The separator item\r
 122      */\r
 123     addSeparator : function(){\r
 124         return this.addItem(new T.Separator());\r
 125     },\r
 126 \r
 127     /**\r
 128      * Adds a spacer element\r
 129      * @return {Ext.Toolbar.Spacer} The spacer item\r
 130      */\r
 131     addSpacer : function(){\r
 132         return this.addItem(new T.Spacer());\r
 133     },\r
 134 \r
 135     /**\r
 136      * Adds a fill element that forces subsequent additions to the right side of the toolbar\r
 137      * @return {Ext.Toolbar.Fill} The fill item\r
 138      */\r
 139     addFill : function(){\r
 140         return this.addItem(new T.Fill());\r
 141     },\r
 142 \r
 143     /**\r
 144      * Adds any standard HTML element to the toolbar\r
 145      * @param {Mixed} el The element or id of the element to add\r
 146      * @return {Ext.Toolbar.Item} The element's item\r
 147      */\r
 148     addElement : function(el){\r
 149         return this.addItem(new T.Item(el));\r
 150     },\r
 151     \r
 152     /**\r
 153      * Adds any Toolbar.Item or subclass\r
 154      * @param {Ext.Toolbar.Item} item\r
 155      * @return {Ext.Toolbar.Item} The item\r
 156      */\r
 157     addItem : function(item){\r
 158         var td = this.nextBlock();\r
 159         this.initMenuTracking(item);\r
 160         item.render(td);\r
 161         this.items.add(item);\r
 162         return item;\r
 163     },\r
 164     \r
 165     /**\r
 166      * Adds a button (or buttons). See {@link Ext.Toolbar.Button} for more info on the config.\r
 167      * @param {Object/Array} config A button config or array of configs\r
 168      * @return {Ext.Toolbar.Button/Array}\r
 169      */\r
 170     addButton : function(config){\r
 171         if(Ext.isArray(config)){\r
 172             var buttons = [];\r
 173             for(var i = 0, len = config.length; i < len; i++) {\r
 174                 buttons.push(this.addButton(config[i]));\r
 175             }\r
 176             return buttons;\r
 177         }\r
 178         var b = config;\r
 179         if(!(config instanceof T.Button)){\r
 180             b = config.split ? \r
 181                 new T.SplitButton(config) :\r
 182                 new T.Button(config);\r
 183         }\r
 184         var td = this.nextBlock();\r
 185         this.initMenuTracking(b);\r
 186         b.render(td);\r
 187         this.items.add(b);\r
 188         return b;\r
 189     },\r
 190 \r
 191     // private\r
 192     initMenuTracking : function(item){\r
 193         if(this.trackMenus && item.menu){\r
 194             item.on({\r
 195                 'menutriggerover' : this.onButtonTriggerOver,\r
 196                 'menushow' : this.onButtonMenuShow,\r
 197                 'menuhide' : this.onButtonMenuHide,\r
 198                 scope: this\r
 199             })\r
 200         }\r
 201     },\r
 202 \r
 203     /**\r
 204      * Adds text to the toolbar\r
 205      * @param {String} text The text to add\r
 206      * @return {Ext.Toolbar.Item} The element's item\r
 207      */\r
 208     addText : function(text){\r
 209         return this.addItem(new T.TextItem(text));\r
 210     },\r
 211     \r
 212     /**\r
 213      * Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Toolbar.Button} at the specified index.\r
 214      * @param {Number} index The index where the item is to be inserted\r
 215      * @param {Object/Ext.Toolbar.Item/Ext.Toolbar.Button/Array} item The button, or button config object to be\r
 216      * inserted, or an array of buttons/configs.\r
 217      * @return {Ext.Toolbar.Button/Item}\r
 218      */\r
 219     insertButton : function(index, item){\r
 220         if(Ext.isArray(item)){\r
 221             var buttons = [];\r
 222             for(var i = 0, len = item.length; i < len; i++) {\r
 223                buttons.push(this.insertButton(index + i, item[i]));\r
 224             }\r
 225             return buttons;\r
 226         }\r
 227         if (!(item instanceof T.Button)){\r
 228            item = new T.Button(item);\r
 229         }\r
 230         var td = document.createElement("td");\r
 231         this.tr.insertBefore(td, this.tr.childNodes[index]);\r
 232         this.initMenuTracking(item);\r
 233         item.render(td);\r
 234         this.items.insert(index, item);\r
 235         return item;\r
 236     },\r
 237     \r
 238     /**\r
 239      * Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config\r
 240      * @param {Object} config\r
 241      * @return {Ext.Toolbar.Item} The element's item\r
 242      */\r
 243     addDom : function(config, returnEl){\r
 244         var td = this.nextBlock();\r
 245         Ext.DomHelper.overwrite(td, config);\r
 246         var ti = new T.Item(td.firstChild);\r
 247         ti.render(td);\r
 248         this.items.add(ti);\r
 249         return ti;\r
 250     },\r
 251 \r
 252     /**\r
 253      * Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have\r
 254      * been rendered yet. For a field that has already been rendered, use {@link #addElement}.\r
 255      * @param {Ext.form.Field} field\r
 256      * @return {Ext.Toolbar.Item}\r
 257      */\r
 258     addField : function(field){\r
 259         var td = this.nextBlock();\r
 260         field.render(td);\r
 261         var ti = new T.Item(td.firstChild);\r
 262         ti.render(td);\r
 263         this.items.add(field);\r
 264         return ti;\r
 265     },\r
 266 \r
 267     // private\r
 268     nextBlock : function(){\r
 269         var td = document.createElement("td");\r
 270         this.tr.appendChild(td);\r
 271         return td;\r
 272     },\r
 273 \r
 274     // private\r
 275     onDestroy : function(){\r
 276         Ext.Toolbar.superclass.onDestroy.call(this);\r
 277         if(this.rendered){\r
 278             if(this.items){ // rendered?\r
 279                 Ext.destroy.apply(Ext, this.items.items);\r
 280             }\r
 281             Ext.Element.uncache(this.tr);\r
 282         }\r
 283     },\r
 284 \r
 285     // private\r
 286     onDisable : function(){\r
 287         this.items.each(function(item){\r
 288              if(item.disable){\r
 289                  item.disable();\r
 290              }\r
 291         });\r
 292     },\r
 293 \r
 294     // private\r
 295     onEnable : function(){\r
 296         this.items.each(function(item){\r
 297              if(item.enable){\r
 298                  item.enable();\r
 299              }\r
 300         });\r
 301     },\r
 302 \r
 303     // private\r
 304     onButtonTriggerOver : function(btn){\r
 305         if(this.activeMenuBtn && this.activeMenuBtn != btn){\r
 306             this.activeMenuBtn.hideMenu();\r
 307             btn.showMenu();\r
 308             this.activeMenuBtn = btn;\r
 309         }\r
 310     },\r
 311 \r
 312     // private\r
 313     onButtonMenuShow : function(btn){\r
 314         this.activeMenuBtn = btn;\r
 315     },\r
 316 \r
 317     // private\r
 318     onButtonMenuHide : function(btn){\r
 319         delete this.activeMenuBtn;\r
 320     }\r
 321 \r
 322     /**\r
 323      * @cfg {String} autoEl @hide\r
 324      */\r
 325 });\r
 326 Ext.reg('toolbar', Ext.Toolbar);\r
 327 \r
 328 /**\r
 329  * @class Ext.Toolbar.Item\r
 330  * The base class that other classes should extend in order to get some basic common toolbar item functionality.\r
 331  * @constructor\r
 332  * Creates a new Item\r
 333  * @param {HTMLElement} el \r
 334  */\r
 335 T.Item = function(el){\r
 336     this.el = Ext.getDom(el);\r
 337     this.id = Ext.id(this.el);\r
 338     this.hidden = false;\r
 339 };\r
 340 \r
 341 T.Item.prototype = {\r
 342     \r
 343     /**\r
 344      * Get this item's HTML Element\r
 345      * @return {HTMLElement}\r
 346      */\r
 347     getEl : function(){\r
 348        return this.el;  \r
 349     },\r
 350 \r
 351     // private\r
 352     render : function(td){\r
 353         this.td = td;\r
 354         td.appendChild(this.el);\r
 355     },\r
 356     \r
 357     /**\r
 358      * Removes and destroys this item.\r
 359      */\r
 360     destroy : function(){\r
 361         if(this.el){\r
 362             var el = Ext.get(this.el);\r
 363             Ext.destroy(el);\r
 364         }\r
 365         Ext.removeNode(this.td);\r
 366     },\r
 367     \r
 368     /**\r
 369      * Shows this item.\r
 370      */\r
 371     show: function(){\r
 372         this.hidden = false;\r
 373         this.td.style.display = "";\r
 374     },\r
 375     \r
 376     /**\r
 377      * Hides this item.\r
 378      */\r
 379     hide: function(){\r
 380         this.hidden = true;\r
 381         this.td.style.display = "none";\r
 382     },\r
 383     \r
 384     /**\r
 385      * Convenience function for boolean show/hide.\r
 386      * @param {Boolean} visible true to show/false to hide\r
 387      */\r
 388     setVisible: function(visible){\r
 389         if(visible) {\r
 390             this.show();\r
 391         }else{\r
 392             this.hide();\r
 393         }\r
 394     },\r
 395     \r
 396     /**\r
 397      * Try to focus this item\r
 398      */\r
 399     focus : function(){\r
 400         Ext.fly(this.el).focus();\r
 401     },\r
 402     \r
 403     /**\r
 404      * Disables this item.\r
 405      */\r
 406     disable : function(){\r
 407         Ext.fly(this.td).addClass("x-item-disabled");\r
 408         this.disabled = true;\r
 409         this.el.disabled = true;\r
 410     },\r
 411     \r
 412     /**\r
 413      * Enables this item.\r
 414      */\r
 415     enable : function(){\r
 416         Ext.fly(this.td).removeClass("x-item-disabled");\r
 417         this.disabled = false;\r
 418         this.el.disabled = false;\r
 419     }\r
 420 };\r
 421 Ext.reg('tbitem', T.Item);\r
 422 \r
 423 \r
 424 /**\r
 425  * @class Ext.Toolbar.Separator\r
 426  * @extends Ext.Toolbar.Item\r
 427  * A simple class that adds a vertical separator bar between toolbar items.  Example usage:\r
 428  * <pre><code>\r
 429 new Ext.Panel({\r
 430         tbar : [\r
 431                 'Item 1',\r
 432                 {xtype: 'tbseparator'}, // or '-'\r
 433                 'Item 2'\r
 434         ]\r
 435 });\r
 436 </code></pre>\r
 437  * @constructor\r
 438  * Creates a new Separator\r
 439  */\r
 440 T.Separator = function(){\r
 441     var s = document.createElement("span");\r
 442     s.className = "ytb-sep";\r
 443     T.Separator.superclass.constructor.call(this, s);\r
 444 };\r
 445 Ext.extend(T.Separator, T.Item, {\r
 446     enable:Ext.emptyFn,\r
 447     disable:Ext.emptyFn,\r
 448     focus:Ext.emptyFn\r
 449 });\r
 450 Ext.reg('tbseparator', T.Separator);\r
 451 \r
 452 /**\r
 453  * @class Ext.Toolbar.Spacer\r
 454  * @extends Ext.Toolbar.Item\r
 455  * A simple element that adds extra horizontal space between items in a toolbar.\r
 456  * <pre><code>\r
 457 new Ext.Panel({\r
 458         tbar : [\r
 459                 'Item 1',\r
 460                 {xtype: 'tbspacer'}, // or ' '\r
 461                 'Item 2'\r
 462         ]\r
 463 });\r
 464 </code></pre>\r
 465  * @constructor\r
 466  * Creates a new Spacer\r
 467  */\r
 468 T.Spacer = function(){\r
 469     var s = document.createElement("div");\r
 470     s.className = "ytb-spacer";\r
 471     T.Spacer.superclass.constructor.call(this, s);\r
 472 };\r
 473 Ext.extend(T.Spacer, T.Item, {\r
 474     enable:Ext.emptyFn,\r
 475     disable:Ext.emptyFn,\r
 476     focus:Ext.emptyFn\r
 477 });\r
 478 \r
 479 Ext.reg('tbspacer', T.Spacer);\r
 480 \r
 481 /**\r
 482  * @class Ext.Toolbar.Fill\r
 483  * @extends Ext.Toolbar.Spacer\r
 484  * A simple element that adds a greedy (100% width) horizontal space between items in a toolbar.\r
 485  * <pre><code>\r
 486 new Ext.Panel({\r
 487         tbar : [\r
 488                 'Item 1',\r
 489                 {xtype: 'tbfill'}, // or '->'\r
 490                 'Item 2'\r
 491         ]\r
 492 });\r
 493 </code></pre>\r
 494  * @constructor\r
 495  * Creates a new Spacer\r
 496  */\r
 497 T.Fill = Ext.extend(T.Spacer, {\r
 498     // private\r
 499     render : function(td){\r
 500         td.style.width = '100%';\r
 501         T.Fill.superclass.render.call(this, td);\r
 502     }\r
 503 });\r
 504 Ext.reg('tbfill', T.Fill);\r
 505 \r
 506 /**\r
 507  * @class Ext.Toolbar.TextItem\r
 508  * @extends Ext.Toolbar.Item\r
 509  * A simple class that renders text directly into a toolbar.\r
 510  * <pre><code>\r
 511 new Ext.Panel({\r
 512         tbar : [\r
 513                 {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'\r
 514         ]\r
 515 });\r
 516 </code></pre>\r
 517  * @constructor\r
 518  * Creates a new TextItem\r
 519  * @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property\r
 520  */\r
 521 T.TextItem = function(t){\r
 522     var s = document.createElement("span");\r
 523     s.className = "ytb-text";\r
 524     s.innerHTML = t.text ? t.text : t;\r
 525     T.TextItem.superclass.constructor.call(this, s);\r
 526 };\r
 527 Ext.extend(T.TextItem, T.Item, {\r
 528     enable:Ext.emptyFn,\r
 529     disable:Ext.emptyFn,\r
 530     focus:Ext.emptyFn\r
 531 });\r
 532 Ext.reg('tbtext', T.TextItem);\r
 533 \r
 534 \r
 535 /**\r
 536  * @class Ext.Toolbar.Button\r
 537  * @extends Ext.Button\r
 538  * A button that renders into a toolbar. Use the <tt>handler</tt> config to specify a callback function\r
 539  * to handle the button's click event.\r
 540  * <pre><code>\r
 541 new Ext.Panel({\r
 542         tbar : [\r
 543                 {text: 'OK', handler: okHandler} // tbbutton is the default xtype if not specified\r
 544         ]\r
 545 });\r
 546 </code></pre>\r
 547  * @constructor\r
 548  * Creates a new Button\r
 549  * @param {Object} config A standard {@link Ext.Button} config object\r
 550  */\r
 551 T.Button = Ext.extend(Ext.Button, {\r
 552     hideParent : true,\r
 553 \r
 554     onDestroy : function(){\r
 555         T.Button.superclass.onDestroy.call(this);\r
 556         if(this.container){\r
 557             this.container.remove();\r
 558         }\r
 559     }\r
 560 });\r
 561 Ext.reg('tbbutton', T.Button);\r
 562 \r
 563 /**\r
 564  * @class Ext.Toolbar.SplitButton\r
 565  * @extends Ext.SplitButton\r
 566  * A split button that renders into a toolbar.\r
 567  * <pre><code>\r
 568 new Ext.Panel({\r
 569         tbar : [\r
 570                 {\r
 571                         xtype: 'tbsplit',\r
 572                         text: 'Options',\r
 573                         handler: optionsHandler, // handle a click on the button itself\r
 574                         menu: new Ext.menu.Menu({\r
 575                         items: [\r
 576                                 // These items will display in a dropdown menu when the split arrow is clicked\r
 577                                 {text: 'Item 1', handler: item1Handler},\r
 578                                 {text: 'Item 2', handler: item2Handler}\r
 579                         ]\r
 580                         })\r
 581                 }\r
 582         ]\r
 583 });\r
 584 </code></pre>\r
 585  * @constructor\r
 586  * Creates a new SplitButton\r
 587  * @param {Object} config A standard {@link Ext.SplitButton} config object\r
 588  */\r
 589 T.SplitButton = Ext.extend(Ext.SplitButton, {\r
 590     hideParent : true,\r
 591 \r
 592     onDestroy : function(){\r
 593         T.SplitButton.superclass.onDestroy.call(this);\r
 594         if(this.container){\r
 595             this.container.remove();\r
 596         }\r
 597     }\r
 598 });\r
 599 \r
 600 Ext.reg('tbsplit', T.SplitButton);\r
 601 // backwards compat\r
 602 T.MenuButton = T.SplitButton;\r
 603 \r
 604 })();\r