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