    /**
     * @class Ext.resizer.ResizeTracker
     * @extends Ext.dd.DragTracker
     */
    Ext.define('Ext.resizer.ResizeTracker', {
        extend: 'Ext.dd.DragTracker',
        dynamic: true,
        preserveRatio: false,

        // Default to no constraint
        constrainTo: null,

        constructor: function(config) {
            var me = this;

            if (!config.el) {
                if (config.target.isComponent) {
                    me.el = config.target.getEl();
                } else {
                    me.el = config.target;
                }
            }
            this.callParent(arguments);

            // Ensure that if we are preserving aspect ratio, the largest minimum is honoured
            if (me.preserveRatio && me.minWidth && me.minHeight) {
                var widthRatio = me.minWidth / me.el.getWidth(),
                    heightRatio = me.minHeight / me.el.getHeight();

                // largest ratio of minimum:size must be preserved.
                // So if a 400x200 pixel image has
                // minWidth: 50, maxWidth: 50, the maxWidth will be 400 * (50/200)... that is 100
                if (heightRatio > widthRatio) {
                    me.minWidth = me.el.getWidth() * heightRatio;
                } else {
                    me.minHeight = me.el.getHeight() * widthRatio;
                }
            }

            // If configured as throttled, create an instance version of resize which calls
            // a throttled function to perform the resize operation.
            if (me.throttle) {
                var throttledResizeFn = Ext.Function.createThrottled(function() {
                        Ext.resizer.ResizeTracker.prototype.resize.apply(me, arguments);
                    }, me.throttle);

                me.resize = function(box, direction, atEnd) {
                    if (atEnd) {
                        Ext.resizer.ResizeTracker.prototype.resize.apply(me, arguments);
                    } else {
                        throttledResizeFn.apply(null, arguments);
                    }
                };
            }
        },

        onBeforeStart: function(e) {
            // record the startBox
            this.startBox = this.el.getBox();
        },

        /**
         * @private
         * Returns the object that will be resized on every mousemove event.
         * 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');
            }
            this.proxy.show();
            return this.proxy;
        },

        onStart: function(e) {
            // returns the Ext.ResizeHandle that the user started dragging
            this.activeResizeHandle = Ext.getCmp(this.getDragTarget().id);

            // If we are using a proxy, ensure it is sized.
            if (!this.dynamic) {
                this.resize(this.startBox, {
                    horizontal: 'none',
                    vertical: 'none'
                });
            }
        },

        onDrag: function(e) {
            // dynamic resizing, update dimensions during resize
            if (this.dynamic || this.proxy) {
                this.updateDimensions(e);
            }
        },

        updateDimensions: function(e, atEnd) {
            var me = this,
                region = me.activeResizeHandle.region,
                offset = me.getOffset(me.constrainTo ? 'dragTarget' : null),
                box = me.startBox,
                ratio,
                widthAdjust = 0,
                heightAdjust = 0,
                adjustX = 0,
                adjustY = 0,
                dragRatio,
                horizDir = offset[0] < 0 ? 'right' : 'left',
                vertDir = offset[1] < 0 ? 'down' : 'up',
                oppositeCorner,
                axis; // 1 = x, 2 = y, 3 = x and y.

            switch (region) {
                case 'south':
                    heightAdjust = offset[1];
                    axis = 2;
                    break;
                case 'north':
                    heightAdjust = -offset[1];
                    adjustY = -heightAdjust;
                    axis = 2;
                    break;
                case 'east':
                    widthAdjust = offset[0];
                    axis = 1;
                    break;
                case 'west':
                    widthAdjust = -offset[0];
                    adjustX = -widthAdjust;
                    axis = 1;
                    break;
                case 'northeast':
                    heightAdjust = -offset[1];
                    adjustY = -heightAdjust;
                    widthAdjust = offset[0];
                    oppositeCorner = [box.x, box.y + box.height];
                    axis = 3;
                    break;
                case 'southeast':
                    heightAdjust = offset[1];
                    widthAdjust = offset[0];
                    oppositeCorner = [box.x, box.y];
                    axis = 3;
                    break;
                case 'southwest':
                    widthAdjust = -offset[0];
                    adjustX = -widthAdjust;
                    heightAdjust = offset[1];
                    oppositeCorner = [box.x + box.width, box.y];
                    axis = 3;
                    break;
                case 'northwest':
                    heightAdjust = -offset[1];
                    adjustY = -heightAdjust;
                    widthAdjust = -offset[0];
                    adjustX = -widthAdjust;
                    oppositeCorner = [box.x + box.width, box.y + box.height];
                    axis = 3;
                    break;
            }

            var newBox = {
                width: box.width + widthAdjust,
                height: box.height + heightAdjust,
                x: box.x + adjustX,
                y: box.y + adjustY
            };

            // out of bounds
            if (newBox.width < me.minWidth || newBox.width > me.maxWidth) {
                newBox.width = Ext.Number.constrain(newBox.width, me.minWidth, me.maxWidth);
                newBox.x = me.lastX || newBox.x;
            } else {
                me.lastX = newBox.x;
            }
            if (newBox.height < me.minHeight || newBox.height > me.maxHeight) {
                newBox.height = Ext.Number.constrain(newBox.height, me.minHeight, me.maxHeight);
                newBox.y = me.lastY || newBox.y;
            } else {
                me.lastY = newBox.y;
            }

            // If this is configured to preserve the aspect ratio, or they are dragging using the shift key
            if (me.preserveRatio || e.shiftKey) {
                var newHeight,
                    newWidth;

                ratio = me.startBox.width / me.startBox.height;

                // Calculate aspect ratio constrained values.
                newHeight = Math.min(Math.max(me.minHeight, newBox.width / ratio), me.maxHeight);
                newWidth = Math.min(Math.max(me.minWidth, newBox.height * ratio), me.maxWidth);

                // X axis: width-only change, height must obey
                if (axis == 1) {
                    newBox.height = newHeight;
                }

                // Y axis: height-only change, width must obey
                else if (axis == 2) {
                    newBox.width = newWidth;
                }

                // Corner drag.
                else {
                    // Drag ratio is the ratio of the mouse point from the opposite corner.
                    // Basically what edge we are dragging, a horizontal edge or a vertical edge.
                    dragRatio = Math.abs(oppositeCorner[0] - this.lastXY[0]) / Math.abs(oppositeCorner[1] - this.lastXY[1]);

                    // If drag ratio > aspect ratio then width is dominant and height must obey
                    if (dragRatio > ratio) {
                        newBox.height = newHeight;
                    } else {
                        newBox.width = newWidth;
                    }

                    // Handle dragging start coordinates
                    if (region == 'northeast') {
                        newBox.y = box.y - (newBox.height - box.height);
                    } else if (region == 'northwest') {
                        newBox.y = box.y - (newBox.height - box.height);
                        newBox.x = box.x - (newBox.width - box.width);
                    } else if (region == 'southwest') {
                        newBox.x = box.x - (newBox.width - box.width);
                    }
                }
            }

            if (heightAdjust === 0) {
                vertDir = 'none';
            }
            if (widthAdjust === 0) {
                horizDir = 'none';
            }
            me.resize(newBox, {
                horizontal: horizDir,
                vertical: vertDir
            }, atEnd);
        },

        getResizeTarget: function(atEnd) {
            return atEnd ? this.target : this.getDynamicTarget();
        },

        resize: function(box, direction, atEnd) {
            var target = this.getResizeTarget(atEnd);
            if (target.isComponent) {
                if (target.floating) {
                    target.setPagePosition(box.x, box.y);
                }
                target.setSize(box.width, box.height);
            } else {
                target.setBox(box);
                // update the originalTarget if this was wrapped.
                if (this.originalTarget) {
                    this.originalTarget.setBox(box);
                }
            }
        },

        onEnd: function(e) {
            this.updateDimensions(e, true);
            if (this.proxy) {
                this.proxy.hide();
            }
        }
    });