Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Resizer.html
index be4201e..d90ac61 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
 </head>
 <body onload="prettyPrint(); highlight();">
   <pre class="prettyprint lang-js"><span id='Ext-resizer-Resizer'>/**
-</span> * @class Ext.resizer.Resizer
- * &lt;p&gt;Applies drag handles to an element or component to make it resizable. The
- * drag handles are inserted into the element (or component's element) and
- * positioned absolute.&lt;/p&gt;
+</span> * Applies drag handles to an element or component to make it resizable. The drag handles are inserted into the element
+ * (or component's element) and positioned absolute.
  *
- * &lt;p&gt;Textarea and img elements will be wrapped with an additional div because
- * these elements do not support child nodes. The original element can be accessed
- * through the originalTarget property.&lt;/p&gt;
+ * Textarea and img elements will be wrapped with an additional div because these elements do not support child nodes.
+ * The original element can be accessed through the originalTarget property.
+ *
+ * Here is the list of valid resize handles:
+ *
+ *     Value   Description
+ *     ------  -------------------
+ *      'n'     north
+ *      's'     south
+ *      'e'     east
+ *      'w'     west
+ *      'nw'    northwest
+ *      'sw'    southwest
+ *      'se'    southeast
+ *      'ne'    northeast
+ *      'all'   all
  *
- * &lt;p&gt;Here is the list of valid resize handles:&lt;/p&gt;
- * &lt;pre&gt;
-Value   Description
-------  -------------------
- 'n'     north
- 's'     south
- 'e'     east
- 'w'     west
- 'nw'    northwest
- 'sw'    southwest
- 'se'    southeast
- 'ne'    northeast
- 'all'   all
-&lt;/pre&gt;
  * {@img Ext.resizer.Resizer/Ext.resizer.Resizer.png Ext.resizer.Resizer component}
- * &lt;p&gt;Here's an example showing the creation of a typical Resizer:&lt;/p&gt;
- * &lt;pre&gt;&lt;code&gt;
-    &lt;div id=&quot;elToResize&quot; style=&quot;width:200px; height:100px; background-color:#000000;&quot;&gt;&lt;/div&gt;
-
-    Ext.create('Ext.resizer.Resizer', {
-        el: 'elToResize',
-        handles: 'all',
-        minWidth: 200,
-        minHeight: 100,
-        maxWidth: 500,
-        maxHeight: 400,
-        pinned: true
-    });
-&lt;/code&gt;&lt;/pre&gt;
-*/
+ *
+ * Here's an example showing the creation of a typical Resizer:
+ *
+ *     Ext.create('Ext.resizer.Resizer', {
+ *         el: 'elToResize',
+ *         handles: 'all',
+ *         minWidth: 200,
+ *         minHeight: 100,
+ *         maxWidth: 500,
+ *         maxHeight: 400,
+ *         pinned: true
+ *     });
+ */
 Ext.define('Ext.resizer.Resizer', {
     mixins: {
         observable: 'Ext.util.Observable'
@@ -66,76 +61,96 @@ Ext.define('Ext.resizer.Resizer', {
     handleCls: Ext.baseCSSPrefix + 'resizable-handle',
     pinnedCls: Ext.baseCSSPrefix + 'resizable-pinned',
     overCls:   Ext.baseCSSPrefix + 'resizable-over',
-    proxyCls:  Ext.baseCSSPrefix + 'resizable-proxy',
     wrapCls:   Ext.baseCSSPrefix + 'resizable-wrap',
 
 <span id='Ext-resizer-Resizer-cfg-dynamic'>    /**
 </span>     * @cfg {Boolean} dynamic
-     * &lt;p&gt;Specify as true to update the {@link #target} (Element or {@link Ext.Component Component}) dynamically during dragging.
-     * This is &lt;code&gt;true&lt;/code&gt; by default, but the {@link Ext.Component Component} class passes &lt;code&gt;false&lt;/code&gt; when it
-     * is configured as {@link Ext.Component#resizable}.&lt;/p&gt;
-     * &lt;p&gt;If specified as &lt;code&gt;false&lt;/code&gt;, a proxy element is displayed during the resize operation, and the {@link #target}
-     * is updated on mouseup.&lt;/p&gt;
+     * Specify as true to update the {@link #target} (Element or {@link Ext.Component Component}) dynamically during
+     * dragging. This is `true` by default, but the {@link Ext.Component Component} class passes `false` when it is
+     * configured as {@link Ext.Component#resizable}.
+     *
+     * If specified as `false`, a proxy element is displayed during the resize operation, and the {@link #target} is
+     * updated on mouseup.
      */
     dynamic: true,
 
 <span id='Ext-resizer-Resizer-cfg-handles'>    /**
-</span>     * @cfg {String} handles String consisting of the resize handles to display. Defaults to 's e se' for
-     * Elements and fixed position Components. Defaults to 8 point resizing for floating Components (such as Windows).
-     * Specify either &lt;code&gt;'all'&lt;/code&gt; or any of &lt;code&gt;'n s e w ne nw se sw'&lt;/code&gt;.
+</span>     * @cfg {String} handles
+     * String consisting of the resize handles to display. Defaults to 's e se' for Elements and fixed position
+     * Components. Defaults to 8 point resizing for floating Components (such as Windows). Specify either `'all'` or any
+     * of `'n s e w ne nw se sw'`.
      */
     handles: 's e se',
 
 <span id='Ext-resizer-Resizer-cfg-height'>    /**
-</span>     * @cfg {Number} height Optional. The height to set target to in pixels (defaults to null)
+</span>     * @cfg {Number} height
+     * Optional. The height to set target to in pixels
      */
     height : null,
 
 <span id='Ext-resizer-Resizer-cfg-width'>    /**
-</span>     * @cfg {Number} width Optional. The width to set the target to in pixels (defaults to null)
+</span>     * @cfg {Number} width
+     * Optional. The width to set the target to in pixels
      */
     width : null,
 
+<span id='Ext-resizer-Resizer-cfg-heightIncrement'>    /**
+</span>     * @cfg {Number} heightIncrement
+     * The increment to snap the height resize in pixels.
+     */
+    heightIncrement : 0,
+
+<span id='Ext-resizer-Resizer-cfg-widthIncrement'>    /**
+</span>     * @cfg {Number} widthIncrement
+     * The increment to snap the width resize in pixels.
+     */
+    widthIncrement : 0,
+
 <span id='Ext-resizer-Resizer-cfg-minHeight'>    /**
-</span>     * @cfg {Number} minHeight The minimum height for the element (defaults to 20)
+</span>     * @cfg {Number} minHeight
+     * The minimum height for the element
      */
     minHeight : 20,
 
 <span id='Ext-resizer-Resizer-cfg-minWidth'>    /**
-</span>     * @cfg {Number} minWidth The minimum width for the element (defaults to 20)
+</span>     * @cfg {Number} minWidth
+     * The minimum width for the element
      */
     minWidth : 20,
 
 <span id='Ext-resizer-Resizer-cfg-maxHeight'>    /**
-</span>     * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
+</span>     * @cfg {Number} maxHeight
+     * The maximum height for the element
      */
     maxHeight : 10000,
 
 <span id='Ext-resizer-Resizer-cfg-maxWidth'>    /**
-</span>     * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
+</span>     * @cfg {Number} maxWidth
+     * The maximum width for the element
      */
     maxWidth : 10000,
 
 <span id='Ext-resizer-Resizer-cfg-pinned'>    /**
-</span>     * @cfg {Boolean} pinned True to ensure that the resize handles are always
-     * visible, false indicates resizing by cursor changes only (defaults to false)
+</span>     * @cfg {Boolean} pinned
+     * True to ensure that the resize handles are always visible, false indicates resizing by cursor changes only
      */
     pinned: false,
 
 <span id='Ext-resizer-Resizer-cfg-preserveRatio'>    /**
-</span>     * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
-     * and width during resize (defaults to false)
+</span>     * @cfg {Boolean} preserveRatio
+     * True to preserve the original ratio between height and width during resize
      */
     preserveRatio: false,
 
 <span id='Ext-resizer-Resizer-cfg-transparent'>    /**
-</span>     * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
+</span>     * @cfg {Boolean} transparent
+     * True for transparent handles. This is only applied at config time.
      */
     transparent: false,
 
 <span id='Ext-resizer-Resizer-cfg-constrainTo'>    /**
-</span>     * @cfg {Mixed} constrainTo Optional. An element, or a {@link Ext.util.Region} into which the resize operation
-     * must be constrained.
+</span>     * @cfg {Ext.Element/Ext.util.Region} constrainTo
+     * An element, or a {@link Ext.util.Region Region} into which the resize operation must be constrained.
      */
 
     possiblePositions: {
@@ -150,13 +165,13 @@ Ext.define('Ext.resizer.Resizer', {
     },
 
 <span id='Ext-resizer-Resizer-cfg-target'>    /**
-</span>     * @cfg {Mixed} target The Element or Component to resize.
+</span>     * @cfg {Ext.Element/Ext.Component} target
+     * The Element or Component to resize.
      */
 
 <span id='Ext-resizer-Resizer-property-el'>    /**
-</span>     * Outer element for resizing behavior.
-     * @type Ext.core.Element
-     * @property el
+</span>     * @property {Ext.Element} el
+     * Outer element for resizing behavior.
      */
 
     constructor: function(config) {
@@ -246,10 +261,9 @@ Ext.define('Ext.resizer.Resizer', {
         tag = me.el.dom.tagName;
         if (tag == 'TEXTAREA' || tag == 'IMG') {
 <span id='Ext-resizer-Resizer-property-originalTarget'>            /**
-</span>             * Reference to the original resize target if the element of the original
-             * resize target was an IMG or a TEXTAREA which must be wrapped in a DIV.
-             * @type Mixed
-             * @property originalTarget
+</span>             * @property {Ext.Element/Ext.Component} originalTarget
+             * Reference to the original resize target if the element of the original resize target was an IMG or a
+             * TEXTAREA which must be wrapped in a DIV.
              */
             me.originalTarget = me.target;
             me.target = me.el = me.el.wrap({
@@ -272,8 +286,7 @@ Ext.define('Ext.resizer.Resizer', {
         }
 
 <span id='Ext-resizer-Resizer-property-resizeTracker'>        /**
-</span>         * @type Ext.resizer.ResizeTracker
-         * @property resizeTracker
+</span>         * @property {Ext.resizer.ResizeTracker} resizeTracker
          */
         me.resizeTracker = Ext.create('Ext.resizer.ResizeTracker', {
             disabled: me.disabled,
@@ -285,6 +298,8 @@ Ext.define('Ext.resizer.Resizer', {
             delegate: '.' + me.handleCls,
             dynamic: me.dynamic,
             preserveRatio: me.preserveRatio,
+            heightIncrement: me.heightIncrement,
+            widthIncrement: me.widthIncrement,
             minHeight: me.minHeight,
             maxHeight: me.maxHeight,
             minWidth: me.minWidth,
@@ -397,24 +412,23 @@ Ext.define('Ext.resizer.Resizer', {
     },
 
 <span id='Ext-resizer-Resizer-method-getEl'>    /**
-</span>     * &lt;p&gt;Returns the element that was configured with the el or target config property.
-     * If a component was configured with the target property then this will return the
-     * element of this component.&lt;p&gt;
-     * &lt;p&gt;Textarea and img elements will be wrapped with an additional div because
-      * these elements do not support child nodes. The original element can be accessed
-     * through the originalTarget property.&lt;/p&gt;
-     * @return {Element} element
+</span>     * Returns the element that was configured with the el or target config property. If a component was configured with
+     * the target property then this will return the element of this component.
+     *
+     * Textarea and img elements will be wrapped with an additional div because these elements do not support child
+     * nodes. The original element can be accessed through the originalTarget property.
+     * @return {Ext.Element} element
      */
     getEl : function() {
         return this.el;
     },
 
 <span id='Ext-resizer-Resizer-method-getTarget'>    /**
-</span>     * &lt;p&gt;Returns the element or component that was configured with the target config property.&lt;p&gt;
-     * &lt;p&gt;Textarea and img elements will be wrapped with an additional div because
-      * these elements do not support child nodes. The original element can be accessed
-     * through the originalTarget property.&lt;/p&gt;
-     * @return {Element/Component}
+</span>     * Returns the element or component that was configured with the target config property.
+     *
+     * Textarea and img elements will be wrapped with an additional div because these elements do not support child
+     * nodes. The original element can be accessed through the originalTarget property.
+     * @return {Ext.Element/Ext.Component}
      */
     getTarget: function() {
         return this.target;
@@ -437,11 +451,11 @@ Ext.define('Ext.resizer.Resizer', {
         var me = this,
             handle;
         if (Ext.isIE6) {
-            handle = me.east; 
+            handle = me.east;
             if (handle) {
                 handle.setHeight(me.el.getHeight());
             }
-            handle = me.west; 
+            handle = me.west;
             if (handle) {
                 handle.setHeight(me.el.getHeight());
             }