Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / docs / source / SplitBar.html
index fb5c9f0..b328184 100644 (file)
-<html>\r
-<head>\r
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.SplitBar"></div>/**\r
- * @class Ext.SplitBar\r
- * @extends Ext.util.Observable\r
- * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).\r
- * <br><br>\r
- * Usage:\r
- * <pre><code>\r
-var split = new Ext.SplitBar("elementToDrag", "elementToSize",\r
-                   Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);\r
-split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));\r
-split.minSize = 100;\r
-split.maxSize = 600;\r
-split.animate = true;\r
-split.on('moved', splitterMoved);\r
-</code></pre>\r
- * @constructor\r
- * Create a new SplitBar\r
- * @param {Mixed} dragElement The element to be dragged and act as the SplitBar.\r
- * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged\r
- * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)\r
- * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or\r
-                        Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial\r
-                        position of the SplitBar).\r
- */\r
-Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){\r
-\r
-    /** @private */\r
-    this.el = Ext.get(dragElement, true);\r
-    this.el.dom.unselectable = "on";\r
-    /** @private */\r
-    this.resizingEl = Ext.get(resizingElement, true);\r
-\r
-    /**\r
-     * @private\r
-     * The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)\r
-     * Note: If this is changed after creating the SplitBar, the placement property must be manually updated\r
-     * @type Number\r
-     */\r
-    this.orientation = orientation || Ext.SplitBar.HORIZONTAL;\r
-\r
-    <div id="prop-Ext.SplitBar-tickSize"></div>/**\r
-     * The increment, in pixels by which to move this SplitBar. When <i>undefined</i>, the SplitBar moves smoothly.\r
-     * @type Number\r
-     * @property tickSize\r
-     */\r
-    <div id="prop-Ext.SplitBar-minSize"></div>/**\r
-     * The minimum size of the resizing element. (Defaults to 0)\r
-     * @type Number\r
-     */\r
-    this.minSize = 0;\r
-\r
-    <div id="prop-Ext.SplitBar-maxSize"></div>/**\r
-     * The maximum size of the resizing element. (Defaults to 2000)\r
-     * @type Number\r
-     */\r
-    this.maxSize = 2000;\r
-\r
-    <div id="prop-Ext.SplitBar-animate"></div>/**\r
-     * Whether to animate the transition to the new size\r
-     * @type Boolean\r
-     */\r
-    this.animate = false;\r
-\r
-    <div id="prop-Ext.SplitBar-useShim"></div>/**\r
-     * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.\r
-     * @type Boolean\r
-     */\r
-    this.useShim = false;\r
-\r
-    /** @private */\r
-    this.shim = null;\r
-\r
-    if(!existingProxy){\r
-        /** @private */\r
-        this.proxy = Ext.SplitBar.createProxy(this.orientation);\r
-    }else{\r
-        this.proxy = Ext.get(existingProxy).dom;\r
-    }\r
-    /** @private */\r
-    this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});\r
-\r
-    /** @private */\r
-    this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);\r
-\r
-    /** @private */\r
-    this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);\r
-\r
-    /** @private */\r
-    this.dragSpecs = {};\r
-\r
-    /**\r
-     * @private The adapter to use to positon and resize elements\r
-     */\r
-    this.adapter = new Ext.SplitBar.BasicLayoutAdapter();\r
-    this.adapter.init(this);\r
-\r
-    if(this.orientation == Ext.SplitBar.HORIZONTAL){\r
-        /** @private */\r
-        this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);\r
-        this.el.addClass("x-splitbar-h");\r
-    }else{\r
-        /** @private */\r
-        this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);\r
-        this.el.addClass("x-splitbar-v");\r
-    }\r
-\r
-    this.addEvents(\r
-        <div id="event-Ext.SplitBar-resize"></div>/**\r
-         * @event resize\r
-         * Fires when the splitter is moved (alias for {@link #moved})\r
-         * @param {Ext.SplitBar} this\r
-         * @param {Number} newSize the new width or height\r
-         */\r
-        "resize",\r
-        <div id="event-Ext.SplitBar-moved"></div>/**\r
-         * @event moved\r
-         * Fires when the splitter is moved\r
-         * @param {Ext.SplitBar} this\r
-         * @param {Number} newSize the new width or height\r
-         */\r
-        "moved",\r
-        <div id="event-Ext.SplitBar-beforeresize"></div>/**\r
-         * @event beforeresize\r
-         * Fires before the splitter is dragged\r
-         * @param {Ext.SplitBar} this\r
-         */\r
-        "beforeresize",\r
-\r
-        "beforeapply"\r
-    );\r
-\r
-    Ext.SplitBar.superclass.constructor.call(this);\r
-};\r
-\r
-Ext.extend(Ext.SplitBar, Ext.util.Observable, {\r
-    onStartProxyDrag : function(x, y){\r
-        this.fireEvent("beforeresize", this);\r
-        this.overlay =  Ext.DomHelper.append(document.body,  {cls: "x-drag-overlay", html: "&#160;"}, true);\r
-        this.overlay.unselectable();\r
-        this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));\r
-        this.overlay.show();\r
-        Ext.get(this.proxy).setDisplayed("block");\r
-        var size = this.adapter.getElementSize(this);\r
-        this.activeMinSize = this.getMinimumSize();\r
-        this.activeMaxSize = this.getMaximumSize();\r
-        var c1 = size - this.activeMinSize;\r
-        var c2 = Math.max(this.activeMaxSize - size, 0);\r
-        if(this.orientation == Ext.SplitBar.HORIZONTAL){\r
-            this.dd.resetConstraints();\r
-            this.dd.setXConstraint(\r
-                this.placement == Ext.SplitBar.LEFT ? c1 : c2,\r
-                this.placement == Ext.SplitBar.LEFT ? c2 : c1,\r
-                this.tickSize\r
-            );\r
-            this.dd.setYConstraint(0, 0);\r
-        }else{\r
-            this.dd.resetConstraints();\r
-            this.dd.setXConstraint(0, 0);\r
-            this.dd.setYConstraint(\r
-                this.placement == Ext.SplitBar.TOP ? c1 : c2,\r
-                this.placement == Ext.SplitBar.TOP ? c2 : c1,\r
-                this.tickSize\r
-            );\r
-         }\r
-        this.dragSpecs.startSize = size;\r
-        this.dragSpecs.startPoint = [x, y];\r
-        Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);\r
-    },\r
-\r
-    /**\r
-     * @private Called after the drag operation by the DDProxy\r
-     */\r
-    onEndProxyDrag : function(e){\r
-        Ext.get(this.proxy).setDisplayed(false);\r
-        var endPoint = Ext.lib.Event.getXY(e);\r
-        if(this.overlay){\r
-            Ext.destroy(this.overlay);\r
-            delete this.overlay;\r
-        }\r
-        var newSize;\r
-        if(this.orientation == Ext.SplitBar.HORIZONTAL){\r
-            newSize = this.dragSpecs.startSize +\r
-                (this.placement == Ext.SplitBar.LEFT ?\r
-                    endPoint[0] - this.dragSpecs.startPoint[0] :\r
-                    this.dragSpecs.startPoint[0] - endPoint[0]\r
-                );\r
-        }else{\r
-            newSize = this.dragSpecs.startSize +\r
-                (this.placement == Ext.SplitBar.TOP ?\r
-                    endPoint[1] - this.dragSpecs.startPoint[1] :\r
-                    this.dragSpecs.startPoint[1] - endPoint[1]\r
-                );\r
-        }\r
-        newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);\r
-        if(newSize != this.dragSpecs.startSize){\r
-            if(this.fireEvent('beforeapply', this, newSize) !== false){\r
-                this.adapter.setElementSize(this, newSize);\r
-                this.fireEvent("moved", this, newSize);\r
-                this.fireEvent("resize", this, newSize);\r
-            }\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.SplitBar-getAdapter"></div>/**\r
-     * Get the adapter this SplitBar uses\r
-     * @return The adapter object\r
-     */\r
-    getAdapter : function(){\r
-        return this.adapter;\r
-    },\r
-\r
-    <div id="method-Ext.SplitBar-setAdapter"></div>/**\r
-     * Set the adapter this SplitBar uses\r
-     * @param {Object} adapter A SplitBar adapter object\r
-     */\r
-    setAdapter : function(adapter){\r
-        this.adapter = adapter;\r
-        this.adapter.init(this);\r
-    },\r
-\r
-    <div id="method-Ext.SplitBar-getMinimumSize"></div>/**\r
-     * Gets the minimum size for the resizing element\r
-     * @return {Number} The minimum size\r
-     */\r
-    getMinimumSize : function(){\r
-        return this.minSize;\r
-    },\r
-\r
-    <div id="method-Ext.SplitBar-setMinimumSize"></div>/**\r
-     * Sets the minimum size for the resizing element\r
-     * @param {Number} minSize The minimum size\r
-     */\r
-    setMinimumSize : function(minSize){\r
-        this.minSize = minSize;\r
-    },\r
-\r
-    <div id="method-Ext.SplitBar-getMaximumSize"></div>/**\r
-     * Gets the maximum size for the resizing element\r
-     * @return {Number} The maximum size\r
-     */\r
-    getMaximumSize : function(){\r
-        return this.maxSize;\r
-    },\r
-\r
-    <div id="method-Ext.SplitBar-setMaximumSize"></div>/**\r
-     * Sets the maximum size for the resizing element\r
-     * @param {Number} maxSize The maximum size\r
-     */\r
-    setMaximumSize : function(maxSize){\r
-        this.maxSize = maxSize;\r
-    },\r
-\r
-    <div id="method-Ext.SplitBar-setCurrentSize"></div>/**\r
-     * Sets the initialize size for the resizing element\r
-     * @param {Number} size The initial size\r
-     */\r
-    setCurrentSize : function(size){\r
-        var oldAnimate = this.animate;\r
-        this.animate = false;\r
-        this.adapter.setElementSize(this, size);\r
-        this.animate = oldAnimate;\r
-    },\r
-\r
-    <div id="method-Ext.SplitBar-destroy"></div>/**\r
-     * Destroy this splitbar.\r
-     * @param {Boolean} removeEl True to remove the element\r
-     */\r
-    destroy : function(removeEl){\r
-        Ext.destroy(this.shim, Ext.get(this.proxy));\r
-        this.dd.unreg();\r
-        if(removeEl){\r
-            this.el.remove();\r
-        }\r
-        this.purgeListeners();\r
-    }\r
-});\r
-\r
-/**\r
- * @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.\r
- */\r
-Ext.SplitBar.createProxy = function(dir){\r
-    var proxy = new Ext.Element(document.createElement("div"));\r
-    document.body.appendChild(proxy.dom);\r
-    proxy.unselectable();\r
-    var cls = 'x-splitbar-proxy';\r
-    proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));\r
-    return proxy.dom;\r
-};\r
-\r
-<div id="cls-Ext.SplitBar.BasicLayoutAdapter"></div>/**\r
- * @class Ext.SplitBar.BasicLayoutAdapter\r
- * Default Adapter. It assumes the splitter and resizing element are not positioned\r
- * elements and only gets/sets the width of the element. Generally used for table based layouts.\r
- */\r
-Ext.SplitBar.BasicLayoutAdapter = function(){\r
-};\r
-\r
-Ext.SplitBar.BasicLayoutAdapter.prototype = {\r
-    // do nothing for now\r
-    init : function(s){\r
-\r
-    },\r
-    <div id="method-Ext.SplitBar.BasicLayoutAdapter-getElementSize"></div>/**\r
-     * Called before drag operations to get the current size of the resizing element.\r
-     * @param {Ext.SplitBar} s The SplitBar using this adapter\r
-     */\r
-     getElementSize : function(s){\r
-        if(s.orientation == Ext.SplitBar.HORIZONTAL){\r
-            return s.resizingEl.getWidth();\r
-        }else{\r
-            return s.resizingEl.getHeight();\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.SplitBar.BasicLayoutAdapter-setElementSize"></div>/**\r
-     * Called after drag operations to set the size of the resizing element.\r
-     * @param {Ext.SplitBar} s The SplitBar using this adapter\r
-     * @param {Number} newSize The new size to set\r
-     * @param {Function} onComplete A function to be invoked when resizing is complete\r
-     */\r
-    setElementSize : function(s, newSize, onComplete){\r
-        if(s.orientation == Ext.SplitBar.HORIZONTAL){\r
-            if(!s.animate){\r
-                s.resizingEl.setWidth(newSize);\r
-                if(onComplete){\r
-                    onComplete(s, newSize);\r
-                }\r
-            }else{\r
-                s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');\r
-            }\r
-        }else{\r
-\r
-            if(!s.animate){\r
-                s.resizingEl.setHeight(newSize);\r
-                if(onComplete){\r
-                    onComplete(s, newSize);\r
-                }\r
-            }else{\r
-                s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');\r
-            }\r
-        }\r
-    }\r
-};\r
-\r
-<div id="cls-Ext.SplitBar.AbsoluteLayoutAdapter"></div>/**\r
- *@class Ext.SplitBar.AbsoluteLayoutAdapter\r
- * @extends Ext.SplitBar.BasicLayoutAdapter\r
- * Adapter that  moves the splitter element to align with the resized sizing element.\r
- * Used with an absolute positioned SplitBar.\r
- * @param {Mixed} container The container that wraps around the absolute positioned content. If it's\r
- * document.body, make sure you assign an id to the body element.\r
- */\r
-Ext.SplitBar.AbsoluteLayoutAdapter = function(container){\r
-    this.basic = new Ext.SplitBar.BasicLayoutAdapter();\r
-    this.container = Ext.get(container);\r
-};\r
-\r
-Ext.SplitBar.AbsoluteLayoutAdapter.prototype = {\r
-    init : function(s){\r
-        this.basic.init(s);\r
-    },\r
-\r
-    getElementSize : function(s){\r
-        return this.basic.getElementSize(s);\r
-    },\r
-\r
-    setElementSize : function(s, newSize, onComplete){\r
-        this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));\r
-    },\r
-\r
-    moveSplitter : function(s){\r
-        var yes = Ext.SplitBar;\r
-        switch(s.placement){\r
-            case yes.LEFT:\r
-                s.el.setX(s.resizingEl.getRight());\r
-                break;\r
-            case yes.RIGHT:\r
-                s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");\r
-                break;\r
-            case yes.TOP:\r
-                s.el.setY(s.resizingEl.getBottom());\r
-                break;\r
-            case yes.BOTTOM:\r
-                s.el.setY(s.resizingEl.getTop() - s.el.getHeight());\r
-                break;\r
-        }\r
-    }\r
-};\r
-\r
-<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-VERTICAL"></div>/**\r
- * Orientation constant - Create a vertical SplitBar\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.VERTICAL = 1;\r
-\r
-<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-HORIZONTAL"></div>/**\r
- * Orientation constant - Create a horizontal SplitBar\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.HORIZONTAL = 2;\r
-\r
-<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-LEFT"></div>/**\r
- * Placement constant - The resizing element is to the left of the splitter element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.LEFT = 1;\r
-\r
-<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-RIGHT"></div>/**\r
- * Placement constant - The resizing element is to the right of the splitter element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.RIGHT = 2;\r
-\r
-<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-TOP"></div>/**\r
- * Placement constant - The resizing element is positioned above the splitter element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.TOP = 3;\r
-\r
-<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-BOTTOM"></div>/**\r
- * Placement constant - The resizing element is positioned under splitter element\r
- * @static\r
- * @type Number\r
- */\r
-Ext.SplitBar.BOTTOM = 4;\r
-</pre>    \r
-</body>\r
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.SplitBar"></div>/**
+ * @class Ext.SplitBar
+ * @extends Ext.util.Observable
+ * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
+ * <br><br>
+ * Usage:
+ * <pre><code>
+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);
+</code></pre>
+ * @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;
+
+    <div id="prop-Ext.SplitBar-tickSize"></div>/**
+     * The increment, in pixels by which to move this SplitBar. When <i>undefined</i>, the SplitBar moves smoothly.
+     * @type Number
+     * @property tickSize
+     */
+    <div id="prop-Ext.SplitBar-minSize"></div>/**
+     * The minimum size of the resizing element. (Defaults to 0)
+     * @type Number
+     */
+    this.minSize = 0;
+
+    <div id="prop-Ext.SplitBar-maxSize"></div>/**
+     * The maximum size of the resizing element. (Defaults to 2000)
+     * @type Number
+     */
+    this.maxSize = 2000;
+
+    <div id="prop-Ext.SplitBar-animate"></div>/**
+     * Whether to animate the transition to the new size
+     * @type Boolean
+     */
+    this.animate = false;
+
+    <div id="prop-Ext.SplitBar-useShim"></div>/**
+     * 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(
+        <div id="event-Ext.SplitBar-resize"></div>/**
+         * @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",
+        <div id="event-Ext.SplitBar-moved"></div>/**
+         * @event moved
+         * Fires when the splitter is moved
+         * @param {Ext.SplitBar} this
+         * @param {Number} newSize the new width or height
+         */
+        "moved",
+        <div id="event-Ext.SplitBar-beforeresize"></div>/**
+         * @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: "&#160;"}, 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);
+            }
+        }
+    },
+
+    <div id="method-Ext.SplitBar-getAdapter"></div>/**
+     * Get the adapter this SplitBar uses
+     * @return The adapter object
+     */
+    getAdapter : function(){
+        return this.adapter;
+    },
+
+    <div id="method-Ext.SplitBar-setAdapter"></div>/**
+     * Set the adapter this SplitBar uses
+     * @param {Object} adapter A SplitBar adapter object
+     */
+    setAdapter : function(adapter){
+        this.adapter = adapter;
+        this.adapter.init(this);
+    },
+
+    <div id="method-Ext.SplitBar-getMinimumSize"></div>/**
+     * Gets the minimum size for the resizing element
+     * @return {Number} The minimum size
+     */
+    getMinimumSize : function(){
+        return this.minSize;
+    },
+
+    <div id="method-Ext.SplitBar-setMinimumSize"></div>/**
+     * Sets the minimum size for the resizing element
+     * @param {Number} minSize The minimum size
+     */
+    setMinimumSize : function(minSize){
+        this.minSize = minSize;
+    },
+
+    <div id="method-Ext.SplitBar-getMaximumSize"></div>/**
+     * Gets the maximum size for the resizing element
+     * @return {Number} The maximum size
+     */
+    getMaximumSize : function(){
+        return this.maxSize;
+    },
+
+    <div id="method-Ext.SplitBar-setMaximumSize"></div>/**
+     * Sets the maximum size for the resizing element
+     * @param {Number} maxSize The maximum size
+     */
+    setMaximumSize : function(maxSize){
+        this.maxSize = maxSize;
+    },
+
+    <div id="method-Ext.SplitBar-setCurrentSize"></div>/**
+     * 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;
+    },
+
+    <div id="method-Ext.SplitBar-destroy"></div>/**
+     * 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;
+};
+
+<div id="cls-Ext.SplitBar.BasicLayoutAdapter"></div>/**
+ * @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){
+
+    },
+    <div id="method-Ext.SplitBar.BasicLayoutAdapter-getElementSize"></div>/**
+     * 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();
+        }
+    },
+
+    <div id="method-Ext.SplitBar.BasicLayoutAdapter-setElementSize"></div>/**
+     * 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');
+            }
+        }
+    }
+};
+
+<div id="cls-Ext.SplitBar.AbsoluteLayoutAdapter"></div>/**
+ *@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;
+        }
+    }
+};
+
+<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-VERTICAL"></div>/**
+ * Orientation constant - Create a vertical SplitBar
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.VERTICAL = 1;
+
+<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-HORIZONTAL"></div>/**
+ * Orientation constant - Create a horizontal SplitBar
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.HORIZONTAL = 2;
+
+<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-LEFT"></div>/**
+ * Placement constant - The resizing element is to the left of the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.LEFT = 1;
+
+<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-RIGHT"></div>/**
+ * Placement constant - The resizing element is to the right of the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.RIGHT = 2;
+
+<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-TOP"></div>/**
+ * Placement constant - The resizing element is positioned above the splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.TOP = 3;
+
+<div id="prop-Ext.SplitBar.AbsoluteLayoutAdapter-BOTTOM"></div>/**
+ * Placement constant - The resizing element is positioned under splitter element
+ * @static
+ * @type Number
+ */
+Ext.SplitBar.BOTTOM = 4;
+</pre>    
+</body>
 </html>
\ No newline at end of file