X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..HEAD:/docs/source/Resizer.html diff --git a/docs/source/Resizer.html b/docs/source/Resizer.html index 39ba094e..d90ac61c 100644 --- a/docs/source/Resizer.html +++ b/docs/source/Resizer.html @@ -1,43 +1,55 @@ -Sencha Documentation Project
/**
- * @class Ext.resizer.Resizer
- * <p>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.</p>
+
+
+
+  
+  The source code
+  
+  
+  
+  
+
+
+  
/**
+ * 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.
+ *
+ * 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:
  *
- * <p>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.</p>
+ *     Value   Description
+ *     ------  -------------------
+ *      'n'     north
+ *      's'     south
+ *      'e'     east
+ *      'w'     west
+ *      'nw'    northwest
+ *      'sw'    southwest
+ *      'se'    southeast
+ *      'ne'    northeast
+ *      'all'   all
  *
- * <p>Here is the list of valid resize handles:</p>
- * <pre>
-Value   Description
-------  -------------------
- 'n'     north
- 's'     south
- 'e'     east
- 'w'     west
- 'nw'    northwest
- 'sw'    southwest
- 'se'    southeast
- 'ne'    northeast
- 'all'   all
-</pre>
  * {@img Ext.resizer.Resizer/Ext.resizer.Resizer.png Ext.resizer.Resizer component}
- * <p>Here's an example showing the creation of a typical Resizer:</p>
- * <pre><code>
-    <div id="elToResize" style="width:200px; height:100px; background-color:#000000;"></div>
-
-    Ext.create('Ext.resizer.Resizer', {
-        el: 'elToResize',
-        handles: 'all',
-        minWidth: 200,
-        minHeight: 100,
-        maxWidth: 500,
-        maxHeight: 400,
-        pinned: true
-    });
-</code></pre>
-*/
+ *
+ * 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'
@@ -49,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',
 
-    /**
+    /**
      * @cfg {Boolean} dynamic
-     * <p>Specify as true to update the {@link #target} (Element or {@link Ext.Component Component}) dynamically during dragging.
-     * This is <code>true</code> by default, but the {@link Ext.Component Component} class passes <code>false</code> when it
-     * is configured as {@link Ext.Component#resizable}.</p>
-     * <p>If specified as <code>false</code>, a proxy element is displayed during the resize operation, and the {@link #target}
-     * is updated on mouseup.</p>
+     * 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,
 
-    /**
-     * @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 <code>'all'</code> or any of <code>'n s e w ne nw se sw'</code>.
+    /**
+     * @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',
 
-    /**
-     * @cfg {Number} height Optional. The height to set target to in pixels (defaults to null)
+    /**
+     * @cfg {Number} height
+     * Optional. The height to set target to in pixels
      */
     height : null,
 
-    /**
-     * @cfg {Number} width Optional. The width to set the target to in pixels (defaults to null)
+    /**
+     * @cfg {Number} width
+     * Optional. The width to set the target to in pixels
      */
     width : null,
 
-    /**
-     * @cfg {Number} minHeight The minimum height for the element (defaults to 20)
+    /**
+     * @cfg {Number} heightIncrement
+     * The increment to snap the height resize in pixels.
+     */
+    heightIncrement : 0,
+
+    /**
+     * @cfg {Number} widthIncrement
+     * The increment to snap the width resize in pixels.
+     */
+    widthIncrement : 0,
+
+    /**
+     * @cfg {Number} minHeight
+     * The minimum height for the element
      */
     minHeight : 20,
 
-    /**
-     * @cfg {Number} minWidth The minimum width for the element (defaults to 20)
+    /**
+     * @cfg {Number} minWidth
+     * The minimum width for the element
      */
     minWidth : 20,
 
-    /**
-     * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
+    /**
+     * @cfg {Number} maxHeight
+     * The maximum height for the element
      */
     maxHeight : 10000,
 
-    /**
-     * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
+    /**
+     * @cfg {Number} maxWidth
+     * The maximum width for the element
      */
     maxWidth : 10000,
 
-    /**
-     * @cfg {Boolean} pinned True to ensure that the resize handles are always
-     * visible, false indicates resizing by cursor changes only (defaults to false)
+    /**
+     * @cfg {Boolean} pinned
+     * True to ensure that the resize handles are always visible, false indicates resizing by cursor changes only
      */
     pinned: false,
 
-    /**
-     * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
-     * and width during resize (defaults to false)
+    /**
+     * @cfg {Boolean} preserveRatio
+     * True to preserve the original ratio between height and width during resize
      */
     preserveRatio: false,
 
-    /**
-     * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
+    /**
+     * @cfg {Boolean} transparent
+     * True for transparent handles. This is only applied at config time.
      */
     transparent: false,
 
-    /**
-     * @cfg {Mixed} constrainTo Optional. An element, or a {@link Ext.util.Region} into which the resize operation
-     * must be constrained.
+    /**
+     * @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: {
@@ -132,14 +164,14 @@ Ext.define('Ext.resizer.Resizer', {
         ne: 'northeast'
     },
 
-    /**
-     * @cfg {Mixed} target The Element or Component to resize.
+    /**
+     * @cfg {Ext.Element/Ext.Component} target
+     * The Element or Component to resize.
      */
 
-    /**
-     * Outer element for resizing behavior.
-     * @type Ext.core.Element
-     * @property el
+    /**
+     * @property {Ext.Element} el
+     * Outer element for resizing behavior.
      */
 
     constructor: function(config) {
@@ -154,7 +186,7 @@ Ext.define('Ext.resizer.Resizer', {
             pos;
 
         this.addEvents(
-            /**
+            /**
              * @event beforeresize
              * Fired before resize is allowed. Return false to cancel resize.
              * @param {Ext.resizer.Resizer} this
@@ -163,7 +195,7 @@ Ext.define('Ext.resizer.Resizer', {
              * @param {Ext.EventObject} e The mousedown event
              */
             'beforeresize',
-            /**
+            /**
              * @event resizedrag
              * Fires during resizing. Return false to cancel resize.
              * @param {Ext.resizer.Resizer} this
@@ -172,7 +204,7 @@ Ext.define('Ext.resizer.Resizer', {
              * @param {Ext.EventObject} e The mousedown event
              */
             'resizedrag',
-            /**
+            /**
              * @event resize
              * Fired after a resize.
              * @param {Ext.resizer.Resizer} this
@@ -228,11 +260,10 @@ Ext.define('Ext.resizer.Resizer', {
         // be wrapped
         tag = me.el.dom.tagName;
         if (tag == 'TEXTAREA' || tag == 'IMG') {
-            /**
-             * 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
+            /**
+             * @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({
@@ -254,9 +285,8 @@ Ext.define('Ext.resizer.Resizer', {
             me.el.addCls(me.pinnedCls);
         }
 
-        /**
-         * @type Ext.resizer.ResizeTracker
-         * @property resizeTracker
+        /**
+         * @property {Ext.resizer.ResizeTracker} resizeTracker
          */
         me.resizeTracker = Ext.create('Ext.resizer.ResizeTracker', {
             disabled: me.disabled,
@@ -268,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,
@@ -335,7 +367,7 @@ Ext.define('Ext.resizer.Resizer', {
         this.resizeTracker.enable();
     },
 
-    /**
+    /**
      * @private Relay the Tracker's mousedown event as beforeresize
      * @param tracker The Resizer
      * @param e The Event
@@ -345,7 +377,7 @@ Ext.define('Ext.resizer.Resizer', {
         return this.fireEvent('beforeresize', this, b.width, b.height, e);
     },
 
-    /**
+    /**
      * @private Relay the Tracker's drag event as resizedrag
      * @param tracker The Resizer
      * @param e The Event
@@ -357,7 +389,7 @@ Ext.define('Ext.resizer.Resizer', {
         return me.fireEvent('resizedrag', me, b.width, b.height, e);
     },
 
-    /**
+    /**
      * @private Relay the Tracker's dragend event as resize
      * @param tracker The Resizer
      * @param e The Event
@@ -369,7 +401,7 @@ Ext.define('Ext.resizer.Resizer', {
         return me.fireEvent('resize', me, b.width, b.height, e);
     },
 
-    /**
+    /**
      * Perform a manual resize and fires the 'resize' event.
      * @param {Number} width
      * @param {Number} height
@@ -379,25 +411,24 @@ Ext.define('Ext.resizer.Resizer', {
         this.fireEvent('resize', this, width, height, null);
     },
 
-    /**
-     * <p>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.<p>
-     * <p>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.</p>
-     * @return {Element} element
+    /**
+     * 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;
     },
 
-    /**
-     * <p>Returns the element or component that was configured with the target config property.<p>
-     * <p>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.</p>
-     * @return {Element/Component}
+    /**
+     * 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;
@@ -412,7 +443,7 @@ Ext.define('Ext.resizer.Resizer', {
         }
     },
 
-    /**
+    /**
      * @private
      * Fix IE6 handle height issue.
      */
@@ -420,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());
             }
@@ -432,4 +463,6 @@ Ext.define('Ext.resizer.Resizer', {
         }
     }
 });
-
\ No newline at end of file +
+ +