GZ/nwyj/.svn/pristine/3d/3d6086f5ed0cb94aa3977fd9b09720c90c3a71ff.svn-base

/*
 * 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;

})();