ext.ux.infopanel.js

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

	// }}}
	// {{{
	/**
		* Returns body height
		* @return {Integer} body height
		*/
	, getBodyHeight: function() {
		return this.body.getComputedHeight();
	}
	// }}}
	// {{{
	/**
		* Returns panel height
		* @return {Integer} panel height
		*/
	, getHeight: function() {
		return this.getBodyHeight() + this.getTitleHeight();
	}
	// }}}
	// {{{
	/**
		* Returns body client height
		* @return {Integer} body client height
		*/
	, getBodyClientHeight: function() {
		return this.body.getHeight(true);
	}
	// }}}
	// {{{
	/**
		* Update the innerHTML of this element, optionally searching for and processing scripts
    * @param {String} html The new HTML
    * @param {Boolean} loadScripts (optional) true to look for and process scripts
    * @param {Function} callback For async script loading you can be noticed when the update completes
    * @return {Ext.Element} this
		*/
	, update: function(html, loadScripts, callback) {
		this.body.update(html, loadScripts, callback);
		return this;
	}
	// }}}
	// {{{
	/**
	 * Updates this panel's element
	 * @param {String} content The new content
	 * @param {Boolean} loadScripts (optional) true to look for and process scripts
	*/
	, setContent: function(content, loadScripts) {
			this.body.update(content, loadScripts);
	}
	// }}}
	// {{{
	/**
	 * Get the {@link Ext.UpdateManager} for this panel. Enables you to perform Ajax updates.
	 * @return {Ext.UpdateManager} The UpdateManager
	 */
	, getUpdateManager: function() {
			return this.body.getUpdateManager();
	}
	// }}}
	// {{{
	/**
	 * The only required property is url. The optional properties nocache, text and scripts 
	 * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their associated property on this panel UpdateManager instance.
	 * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
	 * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
	 * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
	 * @return {Ext.ContentPanel} this
	 */
	, load: function() {
			var um = this.getUpdateManager();
			um.update.apply(um, arguments);
			return this;
	}
	// }}}
	// {{{
	/**
	 * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
	 * @param {String/Function} url The url to load the content from or a function to call to get the url
	 * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Ext.UpdateManager#update} for more details. (Defaults to null)
	 * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
	 * @return {Ext.UpdateManager} The UpdateManager
	 */
	, setUrl: function(url, params, loadOnce) {
			if(this.refreshDelegate){
					this.removeListener("expand", this.refreshDelegate);
			}
			this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
			this.on("expand", this.refreshDelegate);
			this.on({
				beforeexpand: {
					scope: this
					, single: this.loadOnce ? true : false
					, fn: function() {
						this.body.update('');
				}}
			});
			return this.getUpdateManager();
	}
	// }}}
	// {{{
	, _handleRefresh: function(url, params, loadOnce) {
			var updater;
			if(!loadOnce || !this.loaded){
					updater = this.getUpdateManager();
					updater.on({
						update: {
							scope: this
							, single: true
							, fn: function() {
								if(true === this.useShadow && this.shadow) {
									this.shadow.show(this.el);
								}
						}}
					});
					updater.update(url, params, this._setLoaded.createDelegate(this));
			}
	}
	// }}}
	// {{{
	, _setLoaded: function() {
			this.loaded = true;
	} 
	// }}}
  // {{{
	/**
	 *   Force a content refresh from the URL specified in the setUrl() method.
	 *   Will fail silently if the setUrl method has not been called.
	 *   This does not activate the panel, just updates its content.
	 */
	, refresh: function() {
			if(this.refreshDelegate){
				 this.loaded = false;
				 this.refreshDelegate();
			}
	}
	// }}}
	// {{{
	/**
		* Expands the panel
		* @param {Boolean} skipAnimation Set to true to skip animation
		* @return {Ext.ux.InfoPanel} this
		*/
	, expand: function(skipAnimation) {

		// do nothing if already expanded
		if(!this.collapsed) {
			return this;
		}

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

		if(Ext.isGecko) {
			this.autoScrolls = this.body.select('{overflow=auto}');
			this.autoScrolls.setStyle('overflow', 'hidden');
		}

		// reset collapsed flag
		this.collapsed = false;

		this.autoSize();

		// hide shadow
		if(!this.docked) {
			this.setShadow(false);
		}

		// enable resizing
		if(this.resizer && !this.docked) {
			this.setResizable(true);
		}
		
		if(Ext.isIE) {
			this.body.setWidth(this.el.getWidth());
		}

		// animate expand
		if(true === this.animate && true !== skipAnimation) {
				this.body.slideIn('t', {
					easing: this.easingExpand || null
					, scope: this
					, duration: this.duration
					, callback: this.updateVisuals
				});
		}

		// don't animate, just show
		else {
			this.body.show();
			this.updateVisuals();
			this.fireEvent('animationcompleted', this);
		}

		// fire expand event
		this.fireEvent('expand', this);

		return this;

	}
	// }}}
	// {{{
	/**
		* Toggles the expanded/collapsed states
		* @param {Boolean} skipAnimation Set to true to skip animation
		* @return {Ext.ux.InfoPanel} this
		*/
	, toggle: function(skipAnimation) {
			if(this.collapsed) {
				this.expand(skipAnimation);
			}
			else {
				this.collapse(skipAnimation);
			}
			return this;
	}
	// }}}
	// {{{
	/**
		* Collapses the panel
		* @param {Boolean} skipAnimation Set to true to skip animation
		* @return {Ext.ux.InfoPanel} this
		*/
	, collapse: function(skipAnimation) {

		// do nothing if already collapsed or pinned
		if(this.collapsed || this.pinned) {
			return this;
		}

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

		if(Ext.isGecko) {
			this.autoScrolls = this.body.select('{overflow=auto}');
			this.autoScrolls.setStyle('overflow', 'hidden');
		}

		if(this.bodyScroll /*&& !Ext.isIE*/) {
			this.scrollEl.setStyle('overflow','hidden');
		}

		// set collapsed flag
		this.collapsed = true;

		// hide shadow
		this.setShadow(false);

		// disable resizing of collapsed panel
		if(this.resizer) {
			this.setResizable(false);
		}

		// animate collapse
		if(true === this.animate && true !== skipAnimation) {
				this.body.slideOut('t', {
					easing: this.easingCollapse || null
					, scope: this
					, duration: this.duration
					, callback: this.updateVisuals
				});
		}

		// don't animate, just hide
		else {
			this.body.hide();
			this.updateVisuals();
			this.fireEvent('animationcompleted', this);
		}

		// fire collapse event
		this.fireEvent('collapse', this);

		return this;

	}
	// }}}
	// {{{
	/**
		* Called internally to update class of the collapse button 
		* as part of expand and collapse methods
		*
		* @return {Ext.ux.InfoPanel} this
		*/
	, updateVisuals: function() {

			// handle collapsed state
			if(this.collapsed) {
				if(this.showPin) {
					if(this.collapseBtn) {
						this.collapseBtn.show();
					}
					if(this.stickBtn) {
						this.stickBtn.hide();
					}
				}
				if(this.collapseBtn) {
					Ext.fly(this.collapseBtn.dom.firstChild).replaceClass(
						'x-layout-collapse-south', 'x-layout-collapse-east'
					);
				}
				this.body.replaceClass('x-dock-panel-body-expanded', 'x-dock-panel-body-collapsed');
				this.titleEl.replaceClass('x-dock-panel-title-expanded', 'x-dock-panel-title-collapsed');
			}
			
			// handle expanded state
			else {
				if(this.showPin) {
					if(this.pinned) {	
						if(this.stickBtn) {
							Ext.fly(this.stickBtn.dom.firstChild).replaceClass('x-layout-stick', 'x-layout-stuck');
						}
						this.titleEl.addClass('x-dock-panel-title-pinned');
					}
					else {
						if(this.stickBtn) {
							Ext.fly(this.stickBtn.dom.firstChild).replaceClass('x-layout-stuck', 'x-layout-stick');
						}
						this.titleEl.removeClass('x-dock-panel-title-pinned');
					}
					if(this.collapseBtn) {
						this.collapseBtn.hide();
					}
					if(this.stickBtn) {
						this.stickBtn.show();
					}
				}
				else {
					if(this.collapseBtn) {
						Ext.fly(this.collapseBtn.dom.firstChild).replaceClass(
							'x-layout-collapse-east', 'x-layout-collapse-south'
						);
					}
				}
				this.body.replaceClass('x-dock-panel-body-collapsed', 'x-dock-panel-body-expanded');
				this.titleEl.replaceClass('x-dock-panel-title-collapsed', 'x-dock-panel-title-expanded');
			}

			// show shadow if necessary
			if(!this.docked) {
				this.setShadow(true);
			}

			if(this.autoScrolls) {
				this.autoScrolls.setStyle('overflow', 'auto');
			}

			this.setIcon();

			if(this.bodyScroll && !this.docked && !this.collapsed /*&& !Ext.isIE*/) {
				this.scrollEl.setStyle('overflow', 'auto');
			}

			this.constrainToDesktop();

			// fire animationcompleted event
			this.fireEvent('animationcompleted', this);

			// clear visibility style of body's children
			var kids = this.body.select('div[className!=x-grid-viewport],input{visibility}');
			kids.setStyle.defer(1, kids, ['visibility','']);

			// restore body overflow
			if(this.bodyScroll && !this.collapsed /*&& !Ext.isIE*/) {
				this.setHeight(this.getHeight());
				this.scrollEl.setStyle('overflow','auto');
			}

			return this;
	}
	// }}}
	// {{{
	/**
		* Creates toolbar
		* @param {Array} config Configuration for Ext.Toolbar
		* @param {Boolean} bottom true to create bottom toolbar. (defaults to false = top toolbar)
		* @return {Ext.Toolbar} Ext.Toolbar object
		*/
	, createToolbar: function(config, bottom) {

		// we need clean body
		this.body.clean();

		// copy body to new container
		this.scrollEl = Ext.DomHelper.append(document.body, {tag:'div'}, true);
		var el;
		while(el = this.body.down('*')) {
			this.scrollEl.appendChild(el);
		}

		if(this.bodyScroll) {
			this.body.setStyle('overflow', '');
			if(!this.collapsed) {
				this.scrollEl.setStyle('overflow', 'auto');
			}
		}

		var create = {tag:'div'}, tbEl;
		config = config || null;
		if(bottom) {
			this.body.appendChild(this.scrollEl);
			tbEl = Ext.DomHelper.append(this.body, create, true);
			tbEl.addClass('x-dock-panel-toolbar-bottom');
		}
		else {
			tbEl = Ext.DomHelper.insertFirst(this.body, create, true);
			tbEl.addClass('x-dock-panel-toolbar');
			this.body.appendChild(this.scrollEl);
		}
		this.toolbar = new Ext.Toolbar(tbEl, config);
		this.setHeight(this.getHeight());
		return this.toolbar;
	}
	// }}}
	// {{{
	/**
		* Set the panel draggable
		* Uses lazy creation of dd object
		* @param {Boolean} enable pass false to disable dragging
		* @return {Ext.ux.InfoPanel} this
		*/
	, setDraggable: function(enable) {

		if(true !== this.draggable) {
			return this;
		}

		// lazy create proxy
		var dragTitleEl;
		if(!this.proxy) {
			this.proxy = this.el.createProxy('x-dlg-proxy');

			// setup title
			dragTitleEl = Ext.DomHelper.append(this.proxy, {tag:'div'}, true);
			dragTitleEl.update(this.el.dom.firstChild.innerHTML);
			dragTitleEl.dom.className = this.el.dom.firstChild.className;
			if(this.collapsed && Ext.isIE) {
				dragTitleEl.dom.style.borderBottom = "0";
			}

			this.proxy.hide();
			this.proxy.setOpacity(0.5);
			this.dd = new Ext.dd.DDProxy(this.el.dom, 'PanelDrag', {
				dragElId: this.proxy.id
				, scroll: false
			});
			this.dd.scroll = false;
			this.dd.afterDrag = function() {
				this.panel.moveToViewport();
				if(this.panel && this.panel.shadow && !this.panel.docked) {
					this.panel.shadow.show(this.panel.el);
				}
			};

			this.constrainToDesktop();
			Ext.EventManager.onWindowResize(this.moveToViewport, this);
		}

		this.dd.panel = this;
		this.dd.setHandleElId(this.titleEl.id);
		if(false === enable) {
			this.dd.lock();
		}
		else {
			this.dd.unlock();
		}

		return this;
	}
	// }}}
	// {{{
	/**
		* Set the panel resizable
		* Uses lazy creation of the resizer object
		* @param {Boolean} pass false to disable resizing
		* @return {Ext.ux.InfoPanel} this