Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / docs / source / SplitBar.html
index 1b7f59e..fb5c9f0 100644 (file)
@@ -1,17 +1,12 @@
-<html>
-<head>
-  <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.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.SplitBar"></div>/**\r
+<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
@@ -31,12 +26,12 @@ split.on('moved', splitterMoved);
  * @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
+ * @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
+\r
     /** @private */\r
     this.el = Ext.get(dragElement, true);\r
     this.el.dom.unselectable = "on";\r
@@ -50,7 +45,7 @@ Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, ex
      * @type Number\r
      */\r
     this.orientation = orientation || Ext.SplitBar.HORIZONTAL;\r
-    \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
@@ -61,28 +56,28 @@ Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, ex
      * @type Number\r
      */\r
     this.minSize = 0;\r
-    \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
+\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
+\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
+\r
     /** @private */\r
     this.shim = null;\r
-    \r
+\r
     if(!existingProxy){\r
         /** @private */\r
         this.proxy = Ext.SplitBar.createProxy(this.orientation);\r
@@ -91,22 +86,22 @@ Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, ex
     }\r
     /** @private */\r
     this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});\r
-    \r
+\r
     /** @private */\r
     this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);\r
-    \r
+\r
     /** @private */\r
     this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);\r
-    \r
+\r
     /** @private */\r
     this.dragSpecs = {};\r
-    \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
+\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
@@ -116,7 +111,7 @@ Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, ex
         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
+\r
     this.addEvents(\r
         <div id="event-Ext.SplitBar-resize"></div>/**\r
          * @event resize\r
@@ -161,7 +156,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
         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 ? c1 : c2,\r
                 this.placement == Ext.SplitBar.LEFT ? c2 : c1,\r
                 this.tickSize\r
             );\r
@@ -170,7 +165,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
             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 ? c1 : c2,\r
                 this.placement == Ext.SplitBar.TOP ? c2 : c1,\r
                 this.tickSize\r
             );\r
@@ -179,8 +174,8 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
         this.dragSpecs.startPoint = [x, y];\r
         Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);\r
     },\r
-    \r
-    /** \r
+\r
+    /**\r
      * @private Called after the drag operation by the DDProxy\r
      */\r
     onEndProxyDrag : function(e){\r
@@ -192,13 +187,13 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
         }\r
         var newSize;\r
         if(this.orientation == Ext.SplitBar.HORIZONTAL){\r
-            newSize = this.dragSpecs.startSize + \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
+            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
@@ -213,7 +208,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
             }\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
@@ -221,7 +216,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
     getAdapter : function(){\r
         return this.adapter;\r
     },\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
@@ -230,7 +225,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
         this.adapter = adapter;\r
         this.adapter.init(this);\r
     },\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
@@ -238,7 +233,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
     getMinimumSize : function(){\r
         return this.minSize;\r
     },\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
@@ -246,7 +241,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
     setMinimumSize : function(minSize){\r
         this.minSize = minSize;\r
     },\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
@@ -254,7 +249,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
     getMaximumSize : function(){\r
         return this.maxSize;\r
     },\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
@@ -262,7 +257,7 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
     setMaximumSize : function(maxSize){\r
         this.maxSize = maxSize;\r
     },\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
@@ -273,18 +268,18 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
         this.adapter.setElementSize(this, size);\r
         this.animate = oldAnimate;\r
     },\r
-    \r
+\r
     <div id="method-Ext.SplitBar-destroy"></div>/**\r
-     * Destroy this splitbar. \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
+        Ext.destroy(this.shim, Ext.get(this.proxy));\r
         this.dd.unreg();\r
         if(removeEl){\r
             this.el.remove();\r
         }\r
-               this.purgeListeners();\r
+        this.purgeListeners();\r
     }\r
 });\r
 \r
@@ -293,14 +288,14 @@ Ext.extend(Ext.SplitBar, Ext.util.Observable, {
  */\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
-    document.body.appendChild(proxy.dom);\r
     return proxy.dom;\r
 };\r
 \r
-<div id="cls-Ext.SplitBar.BasicLayoutAdapter"></div>/** \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
@@ -311,10 +306,10 @@ Ext.SplitBar.BasicLayoutAdapter = function(){
 Ext.SplitBar.BasicLayoutAdapter.prototype = {\r
     // do nothing for now\r
     init : function(s){\r
-    \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
+     * 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
@@ -324,7 +319,7 @@ Ext.SplitBar.BasicLayoutAdapter.prototype = {
             return s.resizingEl.getHeight();\r
         }\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
@@ -342,7 +337,7 @@ Ext.SplitBar.BasicLayoutAdapter.prototype = {
                 s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');\r
             }\r
         }else{\r
-            \r
+\r
             if(!s.animate){\r
                 s.resizingEl.setHeight(newSize);\r
                 if(onComplete){\r
@@ -355,10 +350,10 @@ Ext.SplitBar.BasicLayoutAdapter.prototype = {
     }\r
 };\r
 \r
-<div id="cls-Ext.SplitBar.AbsoluteLayoutAdapter"></div>/** \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
+ * 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
@@ -372,15 +367,15 @@ Ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
     init : function(s){\r
         this.basic.init(s);\r
     },\r
-    \r
+\r
     getElementSize : function(s){\r
         return this.basic.getElementSize(s);\r
     },\r
-    \r
+\r
     setElementSize : function(s, newSize, onComplete){\r
         this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));\r
     },\r
-    \r
+\r
     moveSplitter : function(s){\r
         var yes = Ext.SplitBar;\r
         switch(s.placement){\r
@@ -441,6 +436,6 @@ Ext.SplitBar.TOP = 3;
  * @type Number\r
  */\r
 Ext.SplitBar.BOTTOM = 4;\r
-</pre>
-</body>
+</pre>    \r
+</body>\r
 </html>
\ No newline at end of file