/**
- * @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', {
}
}
});
-