Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / ResizeTracker.html
index 5fd8056..3ac2ddc 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>
@@ -18,6 +18,8 @@
   <pre class="prettyprint lang-js"><span id='Ext-resizer-ResizeTracker'>/**
 </span> * @class Ext.resizer.ResizeTracker
  * @extends Ext.dd.DragTracker
+ * Private utility class for Ext.resizer.Resizer.
+ * @private
  */
 Ext.define('Ext.resizer.ResizeTracker', {
     extend: 'Ext.dd.DragTracker',
@@ -26,6 +28,8 @@ Ext.define('Ext.resizer.ResizeTracker', {
 
     // Default to no constraint
     constrainTo: null,
+    
+    proxyCls:  Ext.baseCSSPrefix + 'resizable-proxy',
 
     constructor: function(config) {
         var me = this;
@@ -82,15 +86,45 @@ Ext.define('Ext.resizer.ResizeTracker', {
      * If dynamic is false, this will be a proxy, otherwise it will be our actual target.
      */
     getDynamicTarget: function() {
-        var d = this.target;
-        if (this.dynamic) {
-            return d;
-        } else if (!this.proxy) {
-            this.proxy = d.isComponent ? d.getProxy().addCls(Ext.baseCSSPrefix + 'resizable-proxy') : d.createProxy({tag: 'div', cls: Ext.baseCSSPrefix + 'resizable-proxy', id: d.id + '-rzproxy'}, Ext.getBody());
-            this.proxy.removeCls(Ext.baseCSSPrefix + 'proxy-el');
+        var me = this,
+            target = me.target;
+            
+        if (me.dynamic) {
+            return target;
+        } else if (!me.proxy) {
+            me.proxy = me.createProxy(target);
+        }
+        me.proxy.show();
+        return me.proxy;
+    },
+    
+<span id='Ext-resizer-ResizeTracker-method-createProxy'>    /**
+</span>     * Create a proxy for this resizer
+     * @param {Ext.Component/Ext.Element} target The target
+     * @return {Ext.Element} A proxy element
+     */
+    createProxy: function(target){
+        var proxy,
+            cls = this.proxyCls,
+            renderTo;
+            
+        if (target.isComponent) {
+            proxy = target.getProxy().addCls(cls);
+        } else {
+            renderTo = Ext.getBody();
+            if (Ext.scopeResetCSS) {
+                renderTo = Ext.getBody().createChild({
+                    cls: Ext.baseCSSPrefix + 'reset'
+                });
+            }
+            proxy = target.createProxy({
+                tag: 'div',
+                cls: cls,
+                id: target.id + '-rzproxy'
+            }, renderTo);
         }
-        this.proxy.show();
-        return this.proxy;
+        proxy.removeCls(Ext.baseCSSPrefix + 'proxy-el');
+        return proxy;
     },
 
     onStart: function(e) {
@@ -121,6 +155,8 @@ Ext.define('Ext.resizer.ResizeTracker', {
             ratio,
             widthAdjust = 0,
             heightAdjust = 0,
+            snappedWidth,
+            snappedHeight,
             adjustX = 0,
             adjustY = 0,
             dragRatio,
@@ -185,6 +221,31 @@ Ext.define('Ext.resizer.ResizeTracker', {
             y: box.y + adjustY
         };
 
+        // Snap value between stops according to configured increments
+        snappedWidth = Ext.Number.snap(newBox.width, me.widthIncrement);
+        snappedHeight = Ext.Number.snap(newBox.height, me.heightIncrement);
+        if (snappedWidth != newBox.width || snappedHeight != newBox.height){
+            switch (region) {
+                case 'northeast':
+                    newBox.y -= snappedHeight - newBox.height;
+                    break;
+                case 'north':
+                    newBox.y -= snappedHeight - newBox.height;
+                    break;
+                case 'southwest':
+                    newBox.x -= snappedWidth - newBox.width;
+                    break;
+                case 'west':
+                    newBox.x -= snappedWidth - newBox.width;
+                    break;
+                case 'northwest':
+                    newBox.x -= snappedWidth - newBox.width;
+                    newBox.y -= snappedHeight - newBox.height;
+            }
+            newBox.width = snappedWidth;
+            newBox.height = snappedHeight;
+        }
+
         // out of bounds
         if (newBox.width &lt; me.minWidth || newBox.width &gt; me.maxWidth) {
             newBox.width = Ext.Number.constrain(newBox.width, me.minWidth, me.maxWidth);