ext.ux.infopanel.js

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

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

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

/**
  * Ext.ux.InfoPanel Extension Class
  *
  * @author  Ing. Jozef Sakalos
  * @version $Id: Ext.ux.InfoPanel.js 153 2007-08-24 10:46:19Z jozo $
  *
  * @class Ext.ux.InfoPanel
  * @extends Ext.ContentPanel
  * @constructor
  * Creates new Ext.ux.InfoPanel
  * @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
  * @param {String} content (optional) Set the HTML content for this panel
  * @cfg {Boolean} animate set to true to switch animation of expand/collapse on (defaults to undefined)
  * @cfg {String} bodyClass css class added to the body in addition to the default class(es)
  * @cfg {String/HTMLElement/Element} bodyEl This element is used as body of panel.
  * @cfg {String} buttonPosition set this to 'left' to place expand button to the left of titlebar
  * @cfg {Boolean} collapsed false to start with the expanded body (defaults to true)
  * @cfg {String} collapsedIcon Path for icon to display in the title when panel is collapsed
  * @cfg {Boolean} collapseOnUnpin unpinned panel is collapsed when possible (defaults to true)
  * @cfg {Boolean} collapsible false to disable collapsibility (defaults to true)
  * @cfg {Boolean} draggable true to allow panel dragging (defaults to undefined)
  * @cfg {Float} duration Duration of animation in seconds (defaults to 0.35)
  * @cfg {String} easingCollapse Easing to use for collapse animation (e.g. 'backIn')
  * @cfg {String} easingExpand Easing to use for expand animation (e.g. 'backOut')
  * @cfg {String} expandedIcon Path for icon to display in the title when panel is expanded
  * @cfg {String} icon Path for icon to display in the title
  * @cfg {Integer} minWidth minimal width in pixels of the resizable panel (defaults to 0)
  * @cfg {Integer} maxWidth maximal width in pixels of the resizable panel (defaults to 9999)
  * @cfg {Integer} minHeight minimal height in pixels of the resizable panel (defaults to 50)
  * @cfg {Integer} maxHeight maximal height in pixels of the resizable panel (defaults to 9999)
  * @cfg {String} panelClass Set to override the default 'x-dock-panel' class.
  * @cfg {Boolean} pinned true to start in pinned state (implies collapsed:false) (defaults to false)
  * @cfg {Boolean} resizable true to allow use resize width of the panel. (defaults to undefined)
  *  Handles are transparent. (defaults to false)
  * @cfg {String} shadowMode defaults to 'sides'.
  * @cfg {Boolean} showPin Show the pin button - makes sense only if panel is part of Accordion
  * @cfg {String} trigger 'title' or 'button'. Click where expands/collapses the panel (defaults to 'title')
  * @cfg {Boolean} useShadow Use shadows for undocked panels or panels w/o dock. (defaults to undefined = don't use)
  */
Ext.ux.InfoPanel = function(el, config, content) {

	config = config || el;
	// {{{
	// basic setup
	var oldHtml = content || null;
	if(config && config.content) {
		oldHtml = oldHtml || config.content;
		delete(config.content);
	}

	// save autoScroll to this.bodyScroll
	if(config && config.autoScroll) {
		this.bodyScroll = config.autoScroll;
		delete(config.autoScroll);
	}

	var url;
	if(el && el.url) {
		url = el.url;
		delete(el.url);
	}
	if(config && config.url) {
		url = config.url;
		delete(config.url);
	}

	// call parent constructor
	Ext.ux.InfoPanel.superclass.constructor.call(this, el, config);

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

	// shortcut of DomHelper
	var dh = Ext.DomHelper, oldTitleEl;

	this.el.clean();
	this.el.addClass(this.panelClass);

	// handle autoCreate
	if(this.autoCreate) {
		oldHtml = this.el.dom.innerHTML;
		this.el.update('');
		this.desktop.appendChild(this.el);
		this.el.removeClass('x-layout-inactive-content');
	}
	// handle markup
	else {
		this.el.clean();
		if(this.el.dom.firstChild && !this.bodyEl) {
			this.title = this.title || this.el.dom.firstChild.innerHTML;
			if(this.el.dom.firstChild.nextSibling) {
				this.body = Ext.get(this.el.dom.firstChild.nextSibling);
			}
			oldTitleEl = this.el.dom.firstChild;
			oldTitleEl = oldTitleEl.parentNode.removeChild(oldTitleEl);
			oldTitleEl = null;
		}
	}

	// get body element
	if(this.bodyEl) {
		this.body = Ext.get(this.bodyEl);
		this.el.appendChild(this.body);
	}
	// }}}
	// {{{
	// create title element
	var create;
	if('left' === this.buttonPosition ) {
		create = {
			tag:'div', unselectable:'on', cls:'x-unselectable x-layout-panel-hd x-dock-panel-title', children: [
				{tag:'table', cellspacing:0, children: [
					{tag:'tr', children: [
						{tag:'td', children:[
							{tag:'div', cls:'x-dock-panel x-dock-panel-tools'}
						]}
						, {tag:'td', width:'100%', children: [
							{tag:'div', cls:'x-dock-panel x-layout-panel-hd-text x-dock-panel-title-text'}
						]}
						, {tag:'td', cls:'x-dock-panel-title-icon-ct', children: [
							{tag:'img', alt:'', cls:'x-dock-panel-title-icon'}
						]}
					]}
				]}
			]};
	}
	else {
		create = {
			tag:'div', unselectable:'on', cls:'x-unselectable x-layout-panel-hd x-dock-panel-title', children: [
				{tag:'table', cellspacing:0, children: [
					{tag:'tr', children: [
						{tag:'td', cls:'x-dock-panel-title-icon-ct', children: [
							{tag:'img', alt:'', cls:'x-dock-panel-title-icon'}
						]}
						, {tag:'td', width:'100%', children: [
							{tag:'div', cls:'x-dock-panel x-layout-panel-hd-text x-dock-panel-title-text'}
						]}
						, {tag:'td', children:[
							{tag:'div', cls:'x-dock-panel x-dock-panel-tools'}
						]}
					]}
				]}
			]};
	}
	this.titleEl = dh.insertFirst(this.el.dom, create, true);
	this.iconImg = this.titleEl.select('img.x-dock-panel-title-icon').item(0);
	this.titleEl.addClassOnOver('x-dock-panel-title-over');
	this.titleEl.enableDisplayMode();
	this.titleTextEl = Ext.get(this.titleEl.select('.x-dock-panel-title-text').elements[0]);
	this.tools = Ext.get(this.titleEl.select('.x-dock-panel-tools').elements[0]);
	if('right' === this.titleTextAlign) {
		this.titleTextEl.addClass('x-dock-panel-title-right');
	}

	this.tm = Ext.util.TextMetrics.createInstance(this.titleTextEl);
	// }}}
	// {{{
	// set title
	if(this.title) {
		this.setTitle(this.title);
	}
	// }}}
	// {{{
	// create pin button
	if(this.showPin) {
		this.stickBtn = this.createTool(this.tools.dom, 'x-layout-stick');
		this.stickBtn.enableDisplayMode();
		this.stickBtn.on('click', function(e, target) {
			e.stopEvent();
			this.pinned = ! this.pinned;
			this.updateVisuals();
			this.fireEvent('pinned', this, this.pinned);
		}, this);
		this.stickBtn.hide();	
	}
	// }}}
	// {{{
	// create collapse button
	if(this.collapsible) {
		this.collapseBtn = this.createTool(this.tools.dom
			, (this.collapsed ? 'x-layout-collapse-east' : 'x-layout-collapse-south')
		);
		this.collapseBtn.enableDisplayMode();
		if('title' === this.trigger) {
			this.titleEl.addClass('x-window-header-text');
			this.titleEl.on({
				  click:{scope: this, fn:this.toggle}
				, selectstart:{scope: this, fn: function(e) {
						e.preventDefault();
						return false;
				}}
			}, this);
		}
		else {
			this.collapseBtn.on("click", this.toggle, this);
		}
	}
	// }}}
	// {{{
	// create body if it doesn't exist yet
	if(!this.body) {
			this.body = dh.append(this.el, {
				tag: 'div'
				, cls: this.bodyClass || null
				, html: oldHtml || ''
				}, true);
	}
	this.body.enableDisplayMode();
	if(this.collapsed && !this.pinned) {
		this.body.hide();
	}
	else if(this.pinned) {
		this.body.show();
		this.collapsed = false;
	}
	this.body.addClass(this.bodyClass);
	this.body.addClass('x-dock-panel-body-undocked');

	// bodyScroll

	this.scrollEl = this.body;

	// autoScroll -> bodyScroll is experimental due to IE bugs
	this.scrollEl.setStyle('overflow', 
		this.bodyScroll === true && !this.collapsed ? 'auto' : 'hidden');
	// }}}

	if(this.fixedHeight) {
		this.setHeight(this.fixedHeight);
	}

	if(url) {
		this.setUrl(url, this.params, this.loadOnce);
	}

	// install hook for title context menu
	if(this.titleMenu) {
		this.setTitleMenu(this.titleMenu);
	}

	// install hook for icon menu
	if(this.iconMenu) {
		this.setIconMenu(this.iconMenu);
	}

	// {{{
	// add events
	this.addEvents({
		/**
			* @event beforecollapse
			* Fires before collapse is taking place. Return false to cancel collapse
			* @param {Ext.ux.InfoPanel} this
			*/
		beforecollapse: true
		/**
			* @event collapse
			* Fires after collapse
			* @param {Ext.ux.InfoPanel} this
			*/
		, collapse: true
		/**
			* @event beforecollapse
			* Fires before expand is taking place. Return false to cancel expand
			* @param {Ext.ux.InfoPanel} this
			*/
		, beforeexpand: true
		/**
			* @event expand
			* Fires after expand
			* @param {Ext.ux.InfoPanel} this
			*/
		, expand: true
		/**
			* @event pinned
			* Fires when panel is pinned/unpinned
			* @param {Ext.ux.InfoPanel} this
			* @param {Boolean} pinned true if the panel is pinned
			*/
		, pinned: true
		/**
			* @event animationcompleted
			* Fires when animation is completed
			* @param {Ext.ux.InfoPanel} this
			*/
		, animationcompleted: true
		/**
			* @event boxchange
			* Fires when the panel is resized
			* @param {Ext.ux.InfoPanel} this
			* @param {Object} box
			*/
		, boxchange: true

		/**
			* @event redize
			* Fires when info panel is resized
			* @param {Ext.ux.InfoPanel} this
			* @param {Integer} width New width
			* @param {Integer} height New height
			*/
		, resize: true

		/**
			* @event destroy
			* Fires after the panel is destroyed
			* @param {Ext.ux.InfoPanel} this
			*/
		, destroy: true

	});
	// }}}
	// {{{
	// setup dragging, resizing, and shadow
	this.setDraggable(this.draggable);
	this.setResizable(!this.collapsed);
	this.setShadow(this.useShadow);

	// }}}

	this.el.setStyle('z-index', this.zindex);
	this.updateVisuals();

	this.id = this.id || this.el.id;

}; // end of constructor

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

	// {{{
	// defaults
	  adjustments: [0,0]
	, collapsible: true
	, collapsed: true
	, collapseOnUnpin: true
	, pinned: false
	, trigger: 'title'
	, animate: undefined
	, duration: 0.35
	, draggable: undefined
	, resizable: undefined
	, docked: false
	, useShadow: undefined
	, bodyClass: 'x-dock-panel-body'
	, panelClass: 'x-dock-panel'
	, shadowMode: 'sides'
	, dragPadding: {
		  left:8
		, right:16
		, top:0
		, bottom:8
	}
	, lastWidth: 0
	, lastHeight: 0
	, minWidth: 0
	, maxWidth: 9999
	, minHeight: 50
	, maxHeight: 9999
	, autoScroll: false
	, fixedHeight: undefined
	, zindex: 10000
	// }}}
	// {{{
	/**
		* Called internally to create collapse button
		* Calls utility method of Ext.LayoutRegion createTool
		* @param {Element/HTMLElement/String} parentEl element to create the tool in
		* @param {String} className class of the tool
		*/
	, createTool : function(parentEl, className){
		return Ext.LayoutRegion.prototype.createTool(parentEl, className);
  }
	// }}}
	// {{{
	/**
		* Set title of the InfoPanel
		* @param {String} title Title to set
		* @return {Ext.ux.InfoPanel} this
		*/
	, setTitle: function(title) {
		this.title = title;
		this.titleTextEl.update(title);
		this.setIcon();
		return this;
	}
	// }}}
	// {{{
	/**
		* Set the icon to display in title
		* @param {String} iconPath path to use for src property of icon img
		*/
	, setIcon: function(iconPath) {
		iconPath = iconPath || (this.collapsed ? this.collapsedIcon : this.expandedIcon) || this.icon;
		if(iconPath) {
			this.iconImg.dom.src = iconPath;
		}
		else {
			this.iconImg.dom.src = Ext.BLANK_IMAGE_URL;
		}
	}
	// }}}
	// {{{
	/**
		* Assigns menu to title icon
		* @param {Ext.menu.Menu} menu menu to assign
		*/
	, setIconMenu: function(menu) {
		if(this.iconMenu) {
			this.iconImg.removeAllListeners();
		}
		menu.panel = this;
		this.iconImg.on({
			click: {
				scope: this
				, fn: function(e, target) {
				e.stopEvent();
				menu.showAt(e.xy);
			}}
		});
		this.iconMenu = menu;
	}
	// }}}
	// {{{
	/**
		* private - title menu click handler
		* @param {Ext.Event} e event
		* @param {Element} target target
		*/
	, onTitleMenu: function(e, target) {
		e.stopEvent();
		e.preventDefault();
		this.titleMenu.showAt(e.xy);	
	}
	// }}}
	// {{{
	/**
		* Assigns context menu (right click) to the title 
		* @param {Ext.menu.Menu} menu menu to assign
		*/
	, setTitleMenu: function(menu) {
		if(this.titleMenu) {
			this.titleEl.un('contextmenu', this.onTitleMenu, this);
		}
		menu.panel = this;
		this.titleEl.on('contextmenu', this.onTitleMenu, this);
		this.titleMenu = menu;
	}
	// }}}
	// {{{
	/**
		* Get current title
		* @return {String} Current title
		*/
	, getTitle: function() {
		return this.title;
	}
	// }}}
	// {{{
	/**
		* Returns body element
		* This overrides the ContentPanel getEl for convenient access to the body element
		* @return {Element} this.body
		*/
	, getEl: function() {
		return this.body;
	}
	// }}}
	// {{{
	/**
		* Returns title height
		* @return {Integer} title height
		*/
	, getTitleHeight: function() {
		return this.titleEl.getComputedHeight();
	}