+++ /dev/null
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-/**\r
- * @class Ext.Toolbar\r
- * @extends Ext.BoxComponent\r
- * Basic Toolbar class. Toolbar elements can be created explicitly via their constructors, or implicitly\r
- * via their xtypes. Some items also have shortcut strings for creation. \r
- * @constructor\r
- * Creates a new Toolbar\r
- * @param {Object/Array} config A config object or an array of buttons to add\r
- */ \r
- Ext.Toolbar = function(config){\r
- if(Ext.isArray(config)){\r
- config = {buttons:config};\r
- }\r
- Ext.Toolbar.superclass.constructor.call(this, config);\r
-};\r
-\r
-(function(){\r
-\r
-var T = Ext.Toolbar;\r
-\r
-Ext.extend(T, Ext.BoxComponent, {\r
-\r
- trackMenus : true,\r
-\r
- // private\r
- initComponent : function(){\r
- T.superclass.initComponent.call(this);\r
-\r
- if(this.items){\r
- this.buttons = this.items;\r
- }\r
- /**\r
- * A MixedCollection of this Toolbar's items\r
- * @property items\r
- * @type Ext.util.MixedCollection\r
- */\r
- this.items = new Ext.util.MixedCollection(false, function(o){\r
- return o.itemId || o.id || Ext.id();\r
- });\r
- },\r
-\r
- // private\r
- autoCreate: {\r
- cls:'x-toolbar x-small-editor',\r
- html:'<table cellspacing="0"><tr></tr></table>'\r
- },\r
-\r
- // private\r
- onRender : function(ct, position){\r
- this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);\r
- this.tr = this.el.child("tr", true);\r
- },\r
-\r
- // private\r
- afterRender : function(){\r
- T.superclass.afterRender.call(this);\r
- if(this.buttons){\r
- this.add.apply(this, this.buttons);\r
- delete this.buttons;\r
- }\r
- },\r
-\r
- /**\r
- * Adds element(s) to the toolbar -- this function takes a variable number of\r
- * arguments of mixed type and adds them to the toolbar.\r
- * @param {Mixed} arg1 The following types of arguments are all valid:<br />\r
- * <ul>\r
- * <li>{@link Ext.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>\r
- * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>\r
- * <li>Field: Any form field (equivalent to {@link #addField})</li>\r
- * <li>Item: Any subclass of {@link Ext.Toolbar.Item} (equivalent to {@link #addItem})</li>\r
- * <li>String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}).\r
- * Note that there are a few special strings that are treated differently as explained next.</li>\r
- * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>\r
- * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>\r
- * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>\r
- * </ul>\r
- * @param {Mixed} arg2\r
- * @param {Mixed} etc.\r
- */\r
- add : function(){\r
- var a = arguments, l = a.length;\r
- for(var i = 0; i < l; i++){\r
- var el = a[i];\r
- if(el.isFormField){ // some kind of form field\r
- this.addField(el);\r
- }else if(el.render){ // some kind of Toolbar.Item\r
- this.addItem(el);\r
- }else if(typeof el == "string"){ // string\r
- if(el == "separator" || el == "-"){\r
- this.addSeparator();\r
- }else if(el == " "){\r
- this.addSpacer();\r
- }else if(el == "->"){\r
- this.addFill();\r
- }else{\r
- this.addText(el);\r
- }\r
- }else if(el.tagName){ // element\r
- this.addElement(el);\r
- }else if(typeof el == "object"){ // must be button config?\r
- if(el.xtype){\r
- this.addField(Ext.ComponentMgr.create(el, 'button'));\r
- }else{\r
- this.addButton(el);\r
- }\r
- }\r
- }\r
- },\r
- \r
- /**\r
- * Adds a separator\r
- * @return {Ext.Toolbar.Item} The separator item\r
- */\r
- addSeparator : function(){\r
- return this.addItem(new T.Separator());\r
- },\r
-\r
- /**\r
- * Adds a spacer element\r
- * @return {Ext.Toolbar.Spacer} The spacer item\r
- */\r
- addSpacer : function(){\r
- return this.addItem(new T.Spacer());\r
- },\r
-\r
- /**\r
- * Adds a fill element that forces subsequent additions to the right side of the toolbar\r
- * @return {Ext.Toolbar.Fill} The fill item\r
- */\r
- addFill : function(){\r
- return this.addItem(new T.Fill());\r
- },\r
-\r
- /**\r
- * Adds any standard HTML element to the toolbar\r
- * @param {Mixed} el The element or id of the element to add\r
- * @return {Ext.Toolbar.Item} The element's item\r
- */\r
- addElement : function(el){\r
- return this.addItem(new T.Item(el));\r
- },\r
- \r
- /**\r
- * Adds any Toolbar.Item or subclass\r
- * @param {Ext.Toolbar.Item} item\r
- * @return {Ext.Toolbar.Item} The item\r
- */\r
- addItem : function(item){\r
- var td = this.nextBlock();\r
- this.initMenuTracking(item);\r
- item.render(td);\r
- this.items.add(item);\r
- return item;\r
- },\r
- \r
- /**\r
- * Adds a button (or buttons). See {@link Ext.Toolbar.Button} for more info on the config.\r
- * @param {Object/Array} config A button config or array of configs\r
- * @return {Ext.Toolbar.Button/Array}\r
- */\r
- addButton : function(config){\r
- if(Ext.isArray(config)){\r
- var buttons = [];\r
- for(var i = 0, len = config.length; i < len; i++) {\r
- buttons.push(this.addButton(config[i]));\r
- }\r
- return buttons;\r
- }\r
- var b = config;\r
- if(!(config instanceof T.Button)){\r
- b = config.split ? \r
- new T.SplitButton(config) :\r
- new T.Button(config);\r
- }\r
- var td = this.nextBlock();\r
- this.initMenuTracking(b);\r
- b.render(td);\r
- this.items.add(b);\r
- return b;\r
- },\r
-\r
- // private\r
- initMenuTracking : function(item){\r
- if(this.trackMenus && item.menu){\r
- item.on({\r
- 'menutriggerover' : this.onButtonTriggerOver,\r
- 'menushow' : this.onButtonMenuShow,\r
- 'menuhide' : this.onButtonMenuHide,\r
- scope: this\r
- })\r
- }\r
- },\r
-\r
- /**\r
- * Adds text to the toolbar\r
- * @param {String} text The text to add\r
- * @return {Ext.Toolbar.Item} The element's item\r
- */\r
- addText : function(text){\r
- return this.addItem(new T.TextItem(text));\r
- },\r
- \r
- /**\r
- * Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Toolbar.Button} at the specified index.\r
- * @param {Number} index The index where the item is to be inserted\r
- * @param {Object/Ext.Toolbar.Item/Ext.Toolbar.Button/Array} item The button, or button config object to be\r
- * inserted, or an array of buttons/configs.\r
- * @return {Ext.Toolbar.Button/Item}\r
- */\r
- insertButton : function(index, item){\r
- if(Ext.isArray(item)){\r
- var buttons = [];\r
- for(var i = 0, len = item.length; i < len; i++) {\r
- buttons.push(this.insertButton(index + i, item[i]));\r
- }\r
- return buttons;\r
- }\r
- if (!(item instanceof T.Button)){\r
- item = new T.Button(item);\r
- }\r
- var td = document.createElement("td");\r
- this.tr.insertBefore(td, this.tr.childNodes[index]);\r
- this.initMenuTracking(item);\r
- item.render(td);\r
- this.items.insert(index, item);\r
- return item;\r
- },\r
- \r
- /**\r
- * Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config\r
- * @param {Object} config\r
- * @return {Ext.Toolbar.Item} The element's item\r
- */\r
- addDom : function(config, returnEl){\r
- var td = this.nextBlock();\r
- Ext.DomHelper.overwrite(td, config);\r
- var ti = new T.Item(td.firstChild);\r
- ti.render(td);\r
- this.items.add(ti);\r
- return ti;\r
- },\r
-\r
- /**\r
- * Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have\r
- * been rendered yet. For a field that has already been rendered, use {@link #addElement}.\r
- * @param {Ext.form.Field} field\r
- * @return {Ext.Toolbar.Item}\r
- */\r
- addField : function(field){\r
- var td = this.nextBlock();\r
- field.render(td);\r
- var ti = new T.Item(td.firstChild);\r
- ti.render(td);\r
- this.items.add(field);\r
- return ti;\r
- },\r
-\r
- // private\r
- nextBlock : function(){\r
- var td = document.createElement("td");\r
- this.tr.appendChild(td);\r
- return td;\r
- },\r
-\r
- // private\r
- onDestroy : function(){\r
- Ext.Toolbar.superclass.onDestroy.call(this);\r
- if(this.rendered){\r
- if(this.items){ // rendered?\r
- Ext.destroy.apply(Ext, this.items.items);\r
- }\r
- Ext.Element.uncache(this.tr);\r
- }\r
- },\r
-\r
- // private\r
- onDisable : function(){\r
- this.items.each(function(item){\r
- if(item.disable){\r
- item.disable();\r
- }\r
- });\r
- },\r
-\r
- // private\r
- onEnable : function(){\r
- this.items.each(function(item){\r
- if(item.enable){\r
- item.enable();\r
- }\r
- });\r
- },\r
-\r
- // private\r
- onButtonTriggerOver : function(btn){\r
- if(this.activeMenuBtn && this.activeMenuBtn != btn){\r
- this.activeMenuBtn.hideMenu();\r
- btn.showMenu();\r
- this.activeMenuBtn = btn;\r
- }\r
- },\r
-\r
- // private\r
- onButtonMenuShow : function(btn){\r
- this.activeMenuBtn = btn;\r
- },\r
-\r
- // private\r
- onButtonMenuHide : function(btn){\r
- delete this.activeMenuBtn;\r
- }\r
-\r
- /**\r
- * @cfg {String} autoEl @hide\r
- */\r
-});\r
-Ext.reg('toolbar', Ext.Toolbar);\r
-\r
-/**\r
- * @class Ext.Toolbar.Item\r
- * The base class that other classes should extend in order to get some basic common toolbar item functionality.\r
- * @constructor\r
- * Creates a new Item\r
- * @param {HTMLElement} el \r
- */\r
-T.Item = function(el){\r
- this.el = Ext.getDom(el);\r
- this.id = Ext.id(this.el);\r
- this.hidden = false;\r
-};\r
-\r
-T.Item.prototype = {\r
- \r
- /**\r
- * Get this item's HTML Element\r
- * @return {HTMLElement}\r
- */\r
- getEl : function(){\r
- return this.el; \r
- },\r
-\r
- // private\r
- render : function(td){\r
- this.td = td;\r
- td.appendChild(this.el);\r
- },\r
- \r
- /**\r
- * Removes and destroys this item.\r
- */\r
- destroy : function(){\r
- if(this.el){\r
- var el = Ext.get(this.el);\r
- Ext.destroy(el);\r
- }\r
- Ext.removeNode(this.td);\r
- },\r
- \r
- /**\r
- * Shows this item.\r
- */\r
- show: function(){\r
- this.hidden = false;\r
- this.td.style.display = "";\r
- },\r
- \r
- /**\r
- * Hides this item.\r
- */\r
- hide: function(){\r
- this.hidden = true;\r
- this.td.style.display = "none";\r
- },\r
- \r
- /**\r
- * Convenience function for boolean show/hide.\r
- * @param {Boolean} visible true to show/false to hide\r
- */\r
- setVisible: function(visible){\r
- if(visible) {\r
- this.show();\r
- }else{\r
- this.hide();\r
- }\r
- },\r
- \r
- /**\r
- * Try to focus this item\r
- */\r
- focus : function(){\r
- Ext.fly(this.el).focus();\r
- },\r
- \r
- /**\r
- * Disables this item.\r
- */\r
- disable : function(){\r
- Ext.fly(this.td).addClass("x-item-disabled");\r
- this.disabled = true;\r
- this.el.disabled = true;\r
- },\r
- \r
- /**\r
- * Enables this item.\r
- */\r
- enable : function(){\r
- Ext.fly(this.td).removeClass("x-item-disabled");\r
- this.disabled = false;\r
- this.el.disabled = false;\r
- }\r
-};\r
-Ext.reg('tbitem', T.Item);\r
-\r
-\r
-/**\r
- * @class Ext.Toolbar.Separator\r
- * @extends Ext.Toolbar.Item\r
- * A simple class that adds a vertical separator bar between toolbar items. Example usage:\r
- * <pre><code>\r
-new Ext.Panel({\r
- tbar : [\r
- 'Item 1',\r
- {xtype: 'tbseparator'}, // or '-'\r
- 'Item 2'\r
- ]\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Creates a new Separator\r
- */\r
-T.Separator = function(){\r
- var s = document.createElement("span");\r
- s.className = "ytb-sep";\r
- T.Separator.superclass.constructor.call(this, s);\r
-};\r
-Ext.extend(T.Separator, T.Item, {\r
- enable:Ext.emptyFn,\r
- disable:Ext.emptyFn,\r
- focus:Ext.emptyFn\r
-});\r
-Ext.reg('tbseparator', T.Separator);\r
-\r
-/**\r
- * @class Ext.Toolbar.Spacer\r
- * @extends Ext.Toolbar.Item\r
- * A simple element that adds extra horizontal space between items in a toolbar.\r
- * <pre><code>\r
-new Ext.Panel({\r
- tbar : [\r
- 'Item 1',\r
- {xtype: 'tbspacer'}, // or ' '\r
- 'Item 2'\r
- ]\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Creates a new Spacer\r
- */\r
-T.Spacer = function(){\r
- var s = document.createElement("div");\r
- s.className = "ytb-spacer";\r
- T.Spacer.superclass.constructor.call(this, s);\r
-};\r
-Ext.extend(T.Spacer, T.Item, {\r
- enable:Ext.emptyFn,\r
- disable:Ext.emptyFn,\r
- focus:Ext.emptyFn\r
-});\r
-\r
-Ext.reg('tbspacer', T.Spacer);\r
-\r
-/**\r
- * @class Ext.Toolbar.Fill\r
- * @extends Ext.Toolbar.Spacer\r
- * A simple element that adds a greedy (100% width) horizontal space between items in a toolbar.\r
- * <pre><code>\r
-new Ext.Panel({\r
- tbar : [\r
- 'Item 1',\r
- {xtype: 'tbfill'}, // or '->'\r
- 'Item 2'\r
- ]\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Creates a new Spacer\r
- */\r
-T.Fill = Ext.extend(T.Spacer, {\r
- // private\r
- render : function(td){\r
- td.style.width = '100%';\r
- T.Fill.superclass.render.call(this, td);\r
- }\r
-});\r
-Ext.reg('tbfill', T.Fill);\r
-\r
-/**\r
- * @class Ext.Toolbar.TextItem\r
- * @extends Ext.Toolbar.Item\r
- * A simple class that renders text directly into a toolbar.\r
- * <pre><code>\r
-new Ext.Panel({\r
- tbar : [\r
- {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'\r
- ]\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Creates a new TextItem\r
- * @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property\r
- */\r
-T.TextItem = function(t){\r
- var s = document.createElement("span");\r
- s.className = "ytb-text";\r
- s.innerHTML = t.text ? t.text : t;\r
- T.TextItem.superclass.constructor.call(this, s);\r
-};\r
-Ext.extend(T.TextItem, T.Item, {\r
- enable:Ext.emptyFn,\r
- disable:Ext.emptyFn,\r
- focus:Ext.emptyFn\r
-});\r
-Ext.reg('tbtext', T.TextItem);\r
-\r
-\r
-/**\r
- * @class Ext.Toolbar.Button\r
- * @extends Ext.Button\r
- * A button that renders into a toolbar. Use the <tt>handler</tt> config to specify a callback function\r
- * to handle the button's click event.\r
- * <pre><code>\r
-new Ext.Panel({\r
- tbar : [\r
- {text: 'OK', handler: okHandler} // tbbutton is the default xtype if not specified\r
- ]\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Creates a new Button\r
- * @param {Object} config A standard {@link Ext.Button} config object\r
- */\r
-T.Button = Ext.extend(Ext.Button, {\r
- hideParent : true,\r
-\r
- onDestroy : function(){\r
- T.Button.superclass.onDestroy.call(this);\r
- if(this.container){\r
- this.container.remove();\r
- }\r
- }\r
-});\r
-Ext.reg('tbbutton', T.Button);\r
-\r
-/**\r
- * @class Ext.Toolbar.SplitButton\r
- * @extends Ext.SplitButton\r
- * A split button that renders into a toolbar.\r
- * <pre><code>\r
-new Ext.Panel({\r
- tbar : [\r
- {\r
- xtype: 'tbsplit',\r
- text: 'Options',\r
- handler: optionsHandler, // handle a click on the button itself\r
- menu: new Ext.menu.Menu({\r
- items: [\r
- // These items will display in a dropdown menu when the split arrow is clicked\r
- {text: 'Item 1', handler: item1Handler},\r
- {text: 'Item 2', handler: item2Handler}\r
- ]\r
- })\r
- }\r
- ]\r
-});\r
-</code></pre>\r
- * @constructor\r
- * Creates a new SplitButton\r
- * @param {Object} config A standard {@link Ext.SplitButton} config object\r
- */\r
-T.SplitButton = Ext.extend(Ext.SplitButton, {\r
- hideParent : true,\r
-\r
- onDestroy : function(){\r
- T.SplitButton.superclass.onDestroy.call(this);\r
- if(this.container){\r
- this.container.remove();\r
- }\r
- }\r
-});\r
-\r
-Ext.reg('tbsplit', T.SplitButton);\r
-// backwards compat\r
-T.MenuButton = T.SplitButton;\r
-\r
-})();\r
git.ithinksw.org / extjs.git / blobdiff