X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/widgets/SplitBar.js diff --git a/src/widgets/SplitBar.js b/src/widgets/SplitBar.js deleted file mode 100644 index 5cc20310..00000000 --- a/src/widgets/SplitBar.js +++ /dev/null @@ -1,436 +0,0 @@ -/*! - * Ext JS Library 3.1.0 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** - * @class Ext.SplitBar - * @extends Ext.util.Observable - * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized). - *

- * Usage: - *

-var split = new Ext.SplitBar("elementToDrag", "elementToSize",
-                   Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
-split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
-split.minSize = 100;
-split.maxSize = 600;
-split.animate = true;
-split.on('moved', splitterMoved);
-
- * @constructor - * Create a new SplitBar - * @param {Mixed} dragElement The element to be dragged and act as the SplitBar. - * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged - * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL) - * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or - Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial - position of the SplitBar). - */ -Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){ - - /** @private */ - this.el = Ext.get(dragElement, true); - this.el.dom.unselectable = "on"; - /** @private */ - this.resizingEl = Ext.get(resizingElement, true); - - /** - * @private - * The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL) - * Note: If this is changed after creating the SplitBar, the placement property must be manually updated - * @type Number - */ - this.orientation = orientation || Ext.SplitBar.HORIZONTAL; - - /** - * The increment, in pixels by which to move this SplitBar. When undefined, the SplitBar moves smoothly. - * @type Number - * @property tickSize - */ - /** - * The minimum size of the resizing element. (Defaults to 0) - * @type Number - */ - this.minSize = 0; - - /** - * The maximum size of the resizing element. (Defaults to 2000) - * @type Number - */ - this.maxSize = 2000; - - /** - * Whether to animate the transition to the new size - * @type Boolean - */ - this.animate = false; - - /** - * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes. - * @type Boolean - */ - this.useShim = false; - - /** @private */ - this.shim = null; - - if(!existingProxy){ - /** @private */ - this.proxy = Ext.SplitBar.createProxy(this.orientation); - }else{ - this.proxy = Ext.get(existingProxy).dom; - } - /** @private */ - this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id}); - - /** @private */ - this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this); - - /** @private */ - this.dd.endDrag = this.onEndProxyDrag.createDelegate(this); - - /** @private */ - this.dragSpecs = {}; - - /** - * @private The adapter to use to positon and resize elements - */ - this.adapter = new Ext.SplitBar.BasicLayoutAdapter(); - this.adapter.init(this); - - if(this.orientation == Ext.SplitBar.HORIZONTAL){ - /** @private */ - this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT); - this.el.addClass("x-splitbar-h"); - }else{ - /** @private */ - this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM); - this.el.addClass("x-splitbar-v"); - } - - this.addEvents( - /** - * @event resize - * Fires when the splitter is moved (alias for {@link #moved}) - * @param {Ext.SplitBar} this - * @param {Number} newSize the new width or height - */ - "resize", - /** - * @event moved - * Fires when the splitter is moved - * @param {Ext.SplitBar} this - * @param {Number} newSize the new width or height - */ - "moved", - /** - * @event beforeresize - * Fires before the splitter is dragged - * @param {Ext.SplitBar} this - */ - "beforeresize", - - "beforeapply" - ); - - Ext.SplitBar.superclass.constructor.call(this); -}; - -Ext.extend(Ext.SplitBar, Ext.util.Observable, { - onStartProxyDrag : function(x, y){ - this.fireEvent("beforeresize", this); - this.overlay = Ext.DomHelper.append(document.body, {cls: "x-drag-overlay", html: " "}, true); - this.overlay.unselectable(); - this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)); - this.overlay.show(); - Ext.get(this.proxy).setDisplayed("block"); - var size = this.adapter.getElementSize(this); - this.activeMinSize = this.getMinimumSize(); - this.activeMaxSize = this.getMaximumSize(); - var c1 = size - this.activeMinSize; - var c2 = Math.max(this.activeMaxSize - size, 0); - if(this.orientation == Ext.SplitBar.HORIZONTAL){ - this.dd.resetConstraints(); - this.dd.setXConstraint( - this.placement == Ext.SplitBar.LEFT ? c1 : c2, - this.placement == Ext.SplitBar.LEFT ? c2 : c1, - this.tickSize - ); - this.dd.setYConstraint(0, 0); - }else{ - this.dd.resetConstraints(); - this.dd.setXConstraint(0, 0); - this.dd.setYConstraint( - this.placement == Ext.SplitBar.TOP ? c1 : c2, - this.placement == Ext.SplitBar.TOP ? c2 : c1, - this.tickSize - ); - } - this.dragSpecs.startSize = size; - this.dragSpecs.startPoint = [x, y]; - Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y); - }, - - /** - * @private Called after the drag operation by the DDProxy - */ - onEndProxyDrag : function(e){ - Ext.get(this.proxy).setDisplayed(false); - var endPoint = Ext.lib.Event.getXY(e); - if(this.overlay){ - Ext.destroy(this.overlay); - delete this.overlay; - } - var newSize; - if(this.orientation == Ext.SplitBar.HORIZONTAL){ - newSize = this.dragSpecs.startSize + - (this.placement == Ext.SplitBar.LEFT ? - endPoint[0] - this.dragSpecs.startPoint[0] : - this.dragSpecs.startPoint[0] - endPoint[0] - ); - }else{ - newSize = this.dragSpecs.startSize + - (this.placement == Ext.SplitBar.TOP ? - endPoint[1] - this.dragSpecs.startPoint[1] : - this.dragSpecs.startPoint[1] - endPoint[1] - ); - } - newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize); - if(newSize != this.dragSpecs.startSize){ - if(this.fireEvent('beforeapply', this, newSize) !== false){ - this.adapter.setElementSize(this, newSize); - this.fireEvent("moved", this, newSize); - this.fireEvent("resize", this, newSize); - } - } - }, - - /** - * Get the adapter this SplitBar uses - * @return The adapter object - */ - getAdapter : function(){ - return this.adapter; - }, - - /** - * Set the adapter this SplitBar uses - * @param {Object} adapter A SplitBar adapter object - */ - setAdapter : function(adapter){ - this.adapter = adapter; - this.adapter.init(this); - }, - - /** - * Gets the minimum size for the resizing element - * @return {Number} The minimum size - */ - getMinimumSize : function(){ - return this.minSize; - }, - - /** - * Sets the minimum size for the resizing element - * @param {Number} minSize The minimum size - */ - setMinimumSize : function(minSize){ - this.minSize = minSize; - }, - - /** - * Gets the maximum size for the resizing element - * @return {Number} The maximum size - */ - getMaximumSize : function(){ - return this.maxSize; - }, - - /** - * Sets the maximum size for the resizing element - * @param {Number} maxSize The maximum size - */ - setMaximumSize : function(maxSize){ - this.maxSize = maxSize; - }, - - /** - * Sets the initialize size for the resizing element - * @param {Number} size The initial size - */ - setCurrentSize : function(size){ - var oldAnimate = this.animate; - this.animate = false; - this.adapter.setElementSize(this, size); - this.animate = oldAnimate; - }, - - /** - * Destroy this splitbar. - * @param {Boolean} removeEl True to remove the element - */ - destroy : function(removeEl){ - Ext.destroy(this.shim, Ext.get(this.proxy)); - this.dd.unreg(); - if(removeEl){ - this.el.remove(); - } - this.purgeListeners(); - } -}); - -/** - * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color. - */ -Ext.SplitBar.createProxy = function(dir){ - var proxy = new Ext.Element(document.createElement("div")); - document.body.appendChild(proxy.dom); - proxy.unselectable(); - var cls = 'x-splitbar-proxy'; - proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v')); - return proxy.dom; -}; - -/** - * @class Ext.SplitBar.BasicLayoutAdapter - * Default Adapter. It assumes the splitter and resizing element are not positioned - * elements and only gets/sets the width of the element. Generally used for table based layouts. - */ -Ext.SplitBar.BasicLayoutAdapter = function(){ -}; - -Ext.SplitBar.BasicLayoutAdapter.prototype = { - // do nothing for now - init : function(s){ - - }, - /** - * Called before drag operations to get the current size of the resizing element. - * @param {Ext.SplitBar} s The SplitBar using this adapter - */ - getElementSize : function(s){ - if(s.orientation == Ext.SplitBar.HORIZONTAL){ - return s.resizingEl.getWidth(); - }else{ - return s.resizingEl.getHeight(); - } - }, - - /** - * Called after drag operations to set the size of the resizing element. - * @param {Ext.SplitBar} s The SplitBar using this adapter - * @param {Number} newSize The new size to set - * @param {Function} onComplete A function to be invoked when resizing is complete - */ - setElementSize : function(s, newSize, onComplete){ - if(s.orientation == Ext.SplitBar.HORIZONTAL){ - if(!s.animate){ - s.resizingEl.setWidth(newSize); - if(onComplete){ - onComplete(s, newSize); - } - }else{ - s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut'); - } - }else{ - - if(!s.animate){ - s.resizingEl.setHeight(newSize); - if(onComplete){ - onComplete(s, newSize); - } - }else{ - s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut'); - } - } - } -}; - -/** - *@class Ext.SplitBar.AbsoluteLayoutAdapter - * @extends Ext.SplitBar.BasicLayoutAdapter - * Adapter that moves the splitter element to align with the resized sizing element. - * Used with an absolute positioned SplitBar. - * @param {Mixed} container The container that wraps around the absolute positioned content. If it's - * document.body, make sure you assign an id to the body element. - */ -Ext.SplitBar.AbsoluteLayoutAdapter = function(container){ - this.basic = new Ext.SplitBar.BasicLayoutAdapter(); - this.container = Ext.get(container); -}; - -Ext.SplitBar.AbsoluteLayoutAdapter.prototype = { - init : function(s){ - this.basic.init(s); - }, - - getElementSize : function(s){ - return this.basic.getElementSize(s); - }, - - setElementSize : function(s, newSize, onComplete){ - this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s])); - }, - - moveSplitter : function(s){ - var yes = Ext.SplitBar; - switch(s.placement){ - case yes.LEFT: - s.el.setX(s.resizingEl.getRight()); - break; - case yes.RIGHT: - s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px"); - break; - case yes.TOP: - s.el.setY(s.resizingEl.getBottom()); - break; - case yes.BOTTOM: - s.el.setY(s.resizingEl.getTop() - s.el.getHeight()); - break; - } - } -}; - -/** - * Orientation constant - Create a vertical SplitBar - * @static - * @type Number - */ -Ext.SplitBar.VERTICAL = 1; - -/** - * Orientation constant - Create a horizontal SplitBar - * @static - * @type Number - */ -Ext.SplitBar.HORIZONTAL = 2; - -/** - * Placement constant - The resizing element is to the left of the splitter element - * @static - * @type Number - */ -Ext.SplitBar.LEFT = 1; - -/** - * Placement constant - The resizing element is to the right of the splitter element - * @static - * @type Number - */ -Ext.SplitBar.RIGHT = 2; - -/** - * Placement constant - The resizing element is positioned above the splitter element - * @static - * @type Number - */ -Ext.SplitBar.TOP = 3; - -/** - * Placement constant - The resizing element is positioned under splitter element - * @static - * @type Number - */ -Ext.SplitBar.BOTTOM = 4;