ext.ux.accordion.js

来自「anewssystem新闻发布系统集成使用了spring hibernate f」· JavaScript 代码 · 共 1,863 行 · 第 1/3 页

// vim: ts=2:sw=2:nu:fdc=4:nospell

// Create user extensions namespace (Ext.ux)
Ext.namespace('Ext.ux');

/**
  * Ext.ux.Accordion Extension Class
	*
	* @author  Ing. Jozef Sakalos
	* @version $Id: Ext.ux.Accordion.js 152 2007-08-21 17:46:03Z jozo $
  *
  * @class Ext.ux.Accordion
  * @extends Ext.ContentPanel
  * @constructor
  * @param {String/HTMLElement/Element} el The container element for this panel
  * @param {String/Object} config A string to set only the title or a config object
	* @cfg {Boolean} animate global animation flag for all panels. (defaults to true)
	* @cfg {Boolean} boxWrap set to true to wrap wrapEl the body is child of (defaults to false)
	* @cfg {Boolean} draggable set to false to disallow panels dragging (defaults to true)
	* @cfg {Boolean} fitHeight set to true if you use fixed height dock
	* @cfg {Boolean} forceOrder set to true if to disable reordering of panels (defaults to false)
	* @cfg {Boolean} independent true to make panels independent (defaults to false)
	* @cfg {Integer} initialHeight Initial height to set box to (defaults to 0)
	* @cfg {Boolean} keepState Set to false to exclude this accordion from state management (defaults to true)
	* @cfg {Boolean} monitorWindowResize if true panels are moved to 
	*  viewport if window is small (defaults to true)
	* @cfg {Boolean} resizable global resizable flag for all panels (defaults to true)
	* @cfg {Boolean} undockable true to allow undocking of panels (defaults to true)
	* @cfg {Boolean} useShadow global useShadow flag for all panels. (defaults to true)
	* @cfg {Element/HTMLElement/String} wrapEl Element to wrap with nice surrounding
  */
Ext.ux.Accordion = function(el, config) {
	
	// call parent constructor
	Ext.ux.Accordion.superclass.constructor.call(this, el, config);

	// create collection for panels
	this.items = new Ext.util.MixedCollection();

	// assume no panel is expanded
	this.expanded = null;

	// {{{
	// install event handlers
	this.on({

		// {{{
		// runs before expansion. Triggered by panel's beforeexpand event
		beforeexpand: {
			  scope: this
			, fn: function(panel) {
					// raise panel above others
					if(!panel.docked) {
						this.raise(panel);
					}

					// set fixed height
					panel.autoSize();
//					var panelBodyHeight;
//					if(this.fitHeight && panel.docked) {
//						panelBodyHeight = this.getPanelBodyHeight();
//						if(panelBodyHeight) {
//							panel.body.setHeight(panelBodyHeight);
//						}
//					}

					if(panel.docked) {
						this.expandCount++;
						this.expanding = true;
//						this.setDockScroll(false);
					}

					// don't collapse others if independent or not docked
					if(this.independent || !panel.docked) {
						return this;
					}

					// collapse expanded panel
					if(this.expanded && this.expanded.docked) {
						this.expanded.collapse();
					}

					// remember this panel as expanded
					this.expanded = panel;
		}}
		// }}}
		// {{{
		// runs before panel collapses. Triggered by panel's beforecollapse event
		, beforecollapse: {
			  scope: this
			, fn: function(panel) {

				// raise panel if not docked
				if(!panel.docked) {
					this.raise(panel);
				}
				return this;
		}}
		// }}}
		// {{{
		// runs on when panel expands (before animation). Triggered by panel's expand event
		, expand: {
			  scope: this
			, fn: function(panel) {
				if(this.hideOtherOnExpand) {
					this.hideOther(panel);
				}
				this.fireEvent('panelexpand', panel);
		}}
		// }}}
		// {{{
		// runs on when panel collapses (before animation). Triggered by panel's collapse event
		, collapse: {
		 	  scope: this
			, fn: function(panel) {
				this.fireEvent('panelcollapse', panel);
		}}
		// }}}
		// {{{
		// runs on when animation is completed. Triggered by panel's animationcompleted event
		, animationcompleted: {
			scope: this
			, fn: function(panel) {
				var box = panel.el.getBox();
				this.expandCount = (this.expandCount && this.expanding) ? --this.expandCount : 0;
				if((0 === this.expandCount) && this.expanding) {
//					this.setDockScroll(true);
					this.expanding = false;
				}
				if(this.hideOtherOnExpand) {
					if(panel.collapsed && panel.docked) {
						this.showOther(panel);
					}
//					else if(panel.docked) {
//						this.hideOther(panel);
//					}
				}
//				this.fireEvent('panelbox', panel, box);
		}}
		// }}}
		// {{{
		// runs when panel is pinned. Triggered by panel's pinned event
		, pinned: {
			  scope: this
			, fn: function(panel, pinned) {
				if(!pinned) {
					if(panel.collapseOnUnpin) {
						panel.collapse();
					}
					else if(!this.independent) {
						this.items.each(function(p) {
							if(p !== panel && p.docked && !p.pinned) {
								p.collapse();
							}
						});
						this.expanded = panel;
					}
				}
				if(this.hideOtherOnExpand) {
					if(panel.docked && pinned) {
						this.showOther(panel);
					}
				}
				this.fireEvent('panelpinned', panel, pinned);
		}}
		// }}}

		, destroy: {
			scope:this
			, fn: function(panel) {
				this.items.removeKey(panel.id);
				this.updateOrder();
		}}
	});
	// }}}
	// {{{
	// add events
	this.addEvents({
		/**
			* Fires when a panel of the dock is collapsed
			* @event panelcollapse
			* @param {Ext.ux.InfoPanel} panel
			*/
		panelcollapse: true

		/**
			* Fires when a panel of the dock is expanded
			* @event panelexpand
			* @param {Ext.ux.InfoPanel} panel
			*/
		, panelexpand: true

		/**
			* Fires when a panel of the dock is pinned
			* @event panelpinned
			* @param {Ext.ux.InfoPanel} panel
			* @param {Boolean} pinned true if panel was pinned false if unpinned
			*/
		, panelpinned: true

		/**
			* Fires when the independent state of dock changes
			* @event independent
			* @param {Ext.ux.Accordion} this
			* @param {Boolean} independent New independent state
			*/
		, independent: true

		/**
			* Fires when the order of panel is changed
			* @event orderchange
			* @param {Ext.ux.Accordion} this
			* @param {Array} order New order array
			*/
		, orderchange: true

		/**
			* Fires when the undockable state of dock changes
			* @event undockable
			* @param {Ext.ux.Accordion} this
			* @param {Array} undockable New undockable state
			*/
		, undockable: true

		/**
			* Fires when a panel is undocked
			* @event panelundock
			* @param {Ext.ux.InfoPanel} panel
			* @param {Object} box Position and size object
			*/
		, panelundock: true

		/**
			* Fires when a panel is undocked
			* @event paneldock
			* @param {Ext.ux.InfoPanel} panel
			*/
		, paneldock: true

		/**
			* Fires when a panel box is changed, e.g. after dragging
			* @event panelbox
			* @param {Ext.ux.InfoPanel} panel
			* @param {Object} box Position and size object
			*/
		, panelbox: true
		
		/**
			* Fires when useShadow status changes
			* @event useshadow
			* @param {Ext.ux.Accordion} this
			* @param {Boolean} shadow Use shadow (for undocked panels) flag
			*/
		, useshadow: true

		/**
			* Fires before the panel is detached from this accordion. Return false to cancel the detach
			* @event beforedetach
			* @param {Ext.ux.Accordion} this
			* @param {Ext.ux.InfoPanel} panel being detached
			*/
		, beforedetach: true

		/**
			* Fires after the panel has been detached from this accordion
			* @event detach
			* @param {Ext.ux.Accordion} this
			* @param {Ext.ux.InfoPanel} panel detached panel
			*/
		, detach: true

		/**
			* Fires before the panel is attached from this accordion. Return false to cancel the attach
			* @event beforeattach
			* @param {Ext.ux.Accordion} this
			* @param {Ext.ux.InfoPanel} panel being attached
			*/
		, beforeattach: true

		/**
			* Fires after the panel is attached to this accordion
			* @event attach
			* @param {Ext.ux.Accordion} this
			* @param {Ext.ux.InfoPanel} panel attached panel
			*/
		, attach: true

	});
	// }}}

	// setup body
	this.body = Ext.get(this.body) || this.el;
	this.resizeEl = this.body;
	this.id = this.id || this.body.id;
	this.body.addClass('x-dock-body');

	// setup desktop
	this.desktop = Ext.get(this.desktop || document.body);
	//this.desktop = this.desktop.dom || this.desktop;

	// setup fixed hight
	this.wrapEl = Ext.get(this.wrapEl);
	if(this.fitHeight) {
		this.body.setStyle('overflow', 'hidden');
//		this.bodyHeight = this.initialHeight || this.body.getHeight();
		this.body.setHeight(this.initialHeight || this.body.getHeight());
		if(this.boxWrap && this.wrapEl) {
			this.wrapEl.boxWrap();
		}
	}

	// watch window resize
	if(this.monitorWindowResize) {
		Ext.EventManager.onWindowResize(this.adjustViewport, this);
	}

	// create drop zone for panels
	this.dd = new Ext.dd.DropZone(this.body.dom, {
		ddGroup: this.ddGroup || 'dock-' + this.id 
	});

	Ext.ux.AccordionManager.add(this);

}; // end of constructor

// extend
Ext.extend(Ext.ux.Accordion, Ext.ContentPanel, {

	// {{{
	// defaults
	independent: false
	, undockable: true
	, useShadow: true
	, boxWrap: false
	, fitHeight: false
	, initialHeight: 0
	, animate: true // global animation flag
	, expandCount: 0
	, expanding: false
	, monitorWindowResize: true
	, resizable: true // global resizable flag
	, draggable: true // global draggable flag
	, forceOrder: false
	, keepState: true
	, hideOtherOnExpand: false
	// }}}
	// {{{
	/**
		* Adds the panel to Accordion
		* @param {Ext.ux.InfoPanel} panel Panel to add
		* @return {Ext.ux.InfoPanel} added panel
		*/
	, add: function(panel) {

		// append panel to body
		this.body.appendChild(panel.el);

		this.attach(panel);

		// panel dragging 
		if(undefined === panel.draggable && this.draggable) {
			panel.draggable = true;
			panel.dd = new Ext.ux.Accordion.DDDock(panel, this.ddGroup || 'dock-' + this.id, this);
		}

		// panel resizing
		if(undefined === panel.resizable && this.resizable) {
			panel.resizable = true;
//			panel.setResizable(true);
		}

		// panel shadow
		panel.useShadow = undefined === panel.useShadow ? this.useShadow : panel.useShadow;
		panel.setShadow(panel.useShadow);
		if(panel.shadow) {
			panel.shadow.hide();
		}

		// panel animation
		panel.animate = undefined === panel.animate ? this.animate : panel.animate;

		// z-index for panel
		panel.zindex = Ext.ux.AccordionManager.getNextZindex();

		panel.docked = true;
		panel.desktop = this.desktop;

		if(false === panel.collapsed) {
			panel.collapsed = true;
			panel.expand(true);
		}
		return panel;

	}
	// }}}
	// {{{
	/**
		* attach panel to this accordion
		* @param {Ext.ux.InfoPanel} panel panel to attach
		* @return {Ext.ux.Accordion} this
		*/
	, attach: function(panel) {

		// fire beforeattach event
		if(false === this.fireEvent('beforeattach', this, panel)) {
			return this;
		}

		// add panel to items
		this.items.add(panel.id, panel);

		// install event handlers
		this.installRelays(panel);
		panel.bodyClickDelegate = this.onClickPanelBody.createDelegate(this, [panel]);
		panel.body.on('click', panel.bodyClickDelegate);

		// set panel dock
		panel.dock = this;

		// add docked class to panel body
		panel.body.replaceClass('x-dock-panel-body-undocked', 'x-dock-panel-body-docked');

		// repair panel height
		panel.autoSize();
		if(this.fitHeight) {
			this.setPanelHeight(panel);
		}

		// fire attach event
		this.fireEvent('attach', this, panel);

		return this;
	}
	// }}}
	// {{{
	/**
		* detach panel from this accordion
		* @param {Ext.ux.InfoPanel} panel to detach
		* @return {Ext.ux.Accordion} this
		*/
	, detach: function(panel) {

		// fire beforedetach event
		if(false === this.fireEvent('beforedetach', this, panel)) {
			return this;
		}

		// unhook events from panel
		this.removeRelays(panel);
		panel.body.un('click', panel.bodyClickDelegate);

		// remove panel from items
		this.items.remove(panel);
		panel.dock = null;

		// remove docked class from panel body
		panel.body.replaceClass('x-dock-panel-body-docked', 'x-dock-panel-body-undocked');

		// repair expanded property
		if(this.expanded === panel) {
			this.expanded = null;
		}

		// repair panel height
		panel.autoSize();
		if(this.fitHeight) {
			this.setPanelHeight();
		}

		// fire detach event
		this.fireEvent('detach', this, panel);

		return this;
	}
	// }}}
	// {{{
	/**
		* Called internally to raise panel above others
		* @param {Ext.ux.InfoPanel} panel Panel to raise
		* @return {Ext.ux.InfoPanel} panel Panel that has been raised
		*/
	, raise: function(panel) {
		return Ext.ux.AccordionManager.raise(panel);
	}
	// }}}
	// {{{
	/**
		* Resets the order of panels within the dock
		*
		* @return {Ext.ux.Accordion} this
		*/
	, resetOrder: function() {
		this.items.each(function(panel) {
			if(!panel.docked) {
				return;
			}
			this.body.appendChild(panel.el);
		}, this);
		this.updateOrder();
		return this;
	}
	// }}}
	// {{{
	/**
		* Called internally to update the order variable after dragging
		*/
	, updateOrder: function() {
		var order = [];
		var titles = this.body.select('div.x-layout-panel-hd');
		titles.each(function(titleEl) {
			order.push(titleEl.dom.parentNode.id);
		});
		this.order = order;
		this.fireEvent('orderchange', this, order);
	}
	// }}}
	// {{{
	/**
		* Returns array of panel ids in the current order
		* @return {Array} order of panels
		*/
	, getOrder: function() {
		return this.order;
	}
	// }}}
	// {{{
	/**
		* Set the order of panels
		* @param {Array} order Array of ids of panels in required order.
		* @return {Ext.ux.Accordion} this
		*/
	, setOrder: function(order) {
		if('object' !== typeof order || undefined === order.length) {
			throw "setOrder: Argument is not array.";
		}
		var panelEl, dock, panelId, panel;
		for(var i = 0; i < order.length; i++) {
			panelId = order[i];
			dock = Ext.ux.AccordionManager.get(panelId);
			if(dock && dock !== this) {
				panel = dock.items.get(panelId);
				dock.detach(panel);
				this.attach(panel);
			}
			panelEl = Ext.get(panelId);
			if(panelEl) {
				this.body.appendChild(panelEl);
			}
		}
		this.updateOrder();
		return this;
	}
	// }}}
	// {{{
	/**
		* Collapse all docked panels
		* @param {Boolean} alsoPinned true to first unpin then collapse
		* @param {Ext.ux.InfoPanel} except This panel will not be collapsed.
		* @return {Ext.ux.Accordion} this
		*/
	, collapseAll: function(alsoPinned, except) {
		this.items.each(function(panel) {
			if(panel.docked) {
				panel.pinned = alsoPinned ? false : panel.pinned;
				if(!except || panel !== except) {
					panel.collapse();
				}
			}
		}, this);
		return this;
	}
	// }}}
	// {{{
	/**
		* Expand all docked panels in independent mode
		* @return {Ext.ux.Accordion} this
		*/
	, expandAll: function() {
		if(this.independent) {
			this.items.each(function(panel) {
				if(panel.docked && panel.collapsed) {
					panel.expand();
				}
			}, this);
		}
	}
	// }}}
	// {{{
	/**
		* Called internally while dragging and by state manager
		* @param {Ext.ux.InfoPanel/String} panel Panel object or id of the panel
		* @box {Object} box coordinates with target position and size
		* @return {Ext.ux.Accordion} this
		*/
	, undock: function(panel, box) {

		// get panel if necessary
		panel = 'string' === typeof panel ? this.items.get(panel) : panel;

		// proceed only if we have docked panel and in undockable mode
		if(panel && panel.docked && this.undockable) {

			// sanity check
			if(box.x < 0 || box.y < 0) {
				return this;
			}

			// todo: check this
//			if(panel.collapsed) {
//				box.height = panel.lastHeight || panel.maxHeight || box.height;
//			}

			// move the panel in the dom (append to desktop)
			this.desktop.appendChild(panel.el.dom);

			// adjust panel visuals
			panel.el.applyStyles({
				position:'absolute'
				, 'z-index': panel.zindex
			});
			panel.body.replaceClass('x-dock-panel-body-docked', 'x-dock-panel-body-undocked');