Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / Resizable.html
diff --git a/docs/source/Resizable.html b/docs/source/Resizable.html
new file mode 100644 (file)
index 0000000..b7b6e65
--- /dev/null
@@ -0,0 +1,764 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js"><div id="cls-Ext.Resizable"></div>/**\r
+ * @class Ext.Resizable\r
+ * @extends Ext.util.Observable\r
+ * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element \r
+ * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap\r
+ * the textarea in a div and set 'resizeChild' to true (or to the id of the element), <b>or</b> set wrap:true in your config and\r
+ * the element will be wrapped for you automatically.</p>\r
+ * <p>Here is the list of valid resize handles:</p>\r
+ * <pre>\r
+Value   Description\r
+------  -------------------\r
+ 'n'     north\r
+ 's'     south\r
+ 'e'     east\r
+ 'w'     west\r
+ 'nw'    northwest\r
+ 'sw'    southwest\r
+ 'se'    southeast\r
+ 'ne'    northeast\r
+ 'all'   all\r
+</pre>\r
+ * <p>Here's an example showing the creation of a typical Resizable:</p>\r
+ * <pre><code>\r
+var resizer = new Ext.Resizable('element-id', {\r
+    handles: 'all',\r
+    minWidth: 200,\r
+    minHeight: 100,\r
+    maxWidth: 500,\r
+    maxHeight: 400,\r
+    pinned: true\r
+});\r
+resizer.on('resize', myHandler);\r
+</code></pre>\r
+ * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>\r
+ * resizer.east.setDisplayed(false);</p>\r
+ * @constructor\r
+ * Create a new resizable component\r
+ * @param {Mixed} el The id or element to resize\r
+ * @param {Object} config configuration options\r
+  */\r
+Ext.Resizable = function(el, config){\r
+    this.el = Ext.get(el);\r
+    \r
+    if(config && config.wrap){\r
+        config.resizeChild = this.el;\r
+        this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});\r
+        this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';\r
+        this.el.setStyle('overflow', 'hidden');\r
+        this.el.setPositioning(config.resizeChild.getPositioning());\r
+        config.resizeChild.clearPositioning();\r
+        if(!config.width || !config.height){\r
+            var csize = config.resizeChild.getSize();\r
+            this.el.setSize(csize.width, csize.height);\r
+        }\r
+        if(config.pinned && !config.adjustments){\r
+            config.adjustments = 'auto';\r
+        }\r
+    }\r
+\r
+    <div id="prop-Ext.Resizable-proxy"></div>/**\r
+     * The proxy Element that is resized in place of the real Element during the resize operation.\r
+     * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.\r
+     * Read only.\r
+     * @type Ext.Element.\r
+     * @property proxy\r
+     */\r
+    this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());\r
+    this.proxy.unselectable();\r
+    this.proxy.enableDisplayMode('block');\r
+\r
+    Ext.apply(this, config);\r
+    \r
+    if(this.pinned){\r
+        this.disableTrackOver = true;\r
+        this.el.addClass('x-resizable-pinned');\r
+    }\r
+    // if the element isn't positioned, make it relative\r
+    var position = this.el.getStyle('position');\r
+    if(position != 'absolute' && position != 'fixed'){\r
+        this.el.setStyle('position', 'relative');\r
+    }\r
+    if(!this.handles){ // no handles passed, must be legacy style\r
+        this.handles = 's,e,se';\r
+        if(this.multiDirectional){\r
+            this.handles += ',n,w';\r
+        }\r
+    }\r
+    if(this.handles == 'all'){\r
+        this.handles = 'n s e w ne nw se sw';\r
+    }\r
+    var hs = this.handles.split(/\s*?[,;]\s*?| /);\r
+    var ps = Ext.Resizable.positions;\r
+    for(var i = 0, len = hs.length; i < len; i++){\r
+        if(hs[i] && ps[hs[i]]){\r
+            var pos = ps[hs[i]];\r
+            this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);\r
+        }\r
+    }\r
+    // legacy\r
+    this.corner = this.southeast;\r
+    \r
+    if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){\r
+        this.updateBox = true;\r
+    }   \r
+   \r
+    this.activeHandle = null;\r
+    \r
+    if(this.resizeChild){\r
+        if(typeof this.resizeChild == 'boolean'){\r
+            this.resizeChild = Ext.get(this.el.dom.firstChild, true);\r
+        }else{\r
+            this.resizeChild = Ext.get(this.resizeChild, true);\r
+        }\r
+    }\r
+    \r
+    if(this.adjustments == 'auto'){\r
+        var rc = this.resizeChild;\r
+        var hw = this.west, he = this.east, hn = this.north, hs = this.south;\r
+        if(rc && (hw || hn)){\r
+            rc.position('relative');\r
+            rc.setLeft(hw ? hw.el.getWidth() : 0);\r
+            rc.setTop(hn ? hn.el.getHeight() : 0);\r
+        }\r
+        this.adjustments = [\r
+            (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),\r
+            (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1 \r
+        ];\r
+    }\r
+    \r
+    if(this.draggable){\r
+        this.dd = this.dynamic ? \r
+            this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});\r
+        this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);\r
+    }\r
+    \r
+    this.addEvents(\r
+        <div id="event-Ext.Resizable-beforeresize"></div>/**\r
+         * @event beforeresize\r
+         * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.\r
+         * @param {Ext.Resizable} this\r
+         * @param {Ext.EventObject} e The mousedown event\r
+         */\r
+        'beforeresize',\r
+        <div id="event-Ext.Resizable-resize"></div>/**\r
+         * @event resize\r
+         * Fired after a resize.\r
+         * @param {Ext.Resizable} this\r
+         * @param {Number} width The new width\r
+         * @param {Number} height The new height\r
+         * @param {Ext.EventObject} e The mouseup event\r
+         */\r
+        'resize'\r
+    );\r
+    \r
+    if(this.width !== null && this.height !== null){\r
+        this.resizeTo(this.width, this.height);\r
+    }else{\r
+        this.updateChildSize();\r
+    }\r
+    if(Ext.isIE){\r
+        this.el.dom.style.zoom = 1;\r
+    }\r
+    Ext.Resizable.superclass.constructor.call(this);\r
+};\r
+\r
+Ext.extend(Ext.Resizable, Ext.util.Observable, {\r
+\r
+    <div id="cfg-Ext.Resizable-adjustments"></div>/**\r
+     * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the\r
+     * resize operation's new size (defaults to <tt>[0, 0]</tt>)\r
+     */\r
+    adjustments : [0, 0],\r
+    <div id="cfg-Ext.Resizable-animate"></div>/**\r
+     * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)\r
+     */\r
+    animate : false,\r
+    <div id="cfg-Ext.Resizable-constrainTo"></div>/**\r
+     * @cfg {Mixed} constrainTo Constrain the resize to a particular element\r
+     */\r
+    <div id="cfg-Ext.Resizable-disableTrackOver"></div>/**\r
+     * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)\r
+     */\r
+    disableTrackOver : false,\r
+    <div id="cfg-Ext.Resizable-draggable"></div>/**\r
+     * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)\r
+     */\r
+    draggable: false,\r
+    <div id="cfg-Ext.Resizable-duration"></div>/**\r
+     * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)\r
+     */\r
+    duration : 0.35,\r
+    <div id="cfg-Ext.Resizable-dynamic"></div>/**\r
+     * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)\r
+     */\r
+    dynamic : false,\r
+    <div id="cfg-Ext.Resizable-easing"></div>/**\r
+     * @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)\r
+     */\r
+    easing : 'easeOutStrong',\r
+    <div id="cfg-Ext.Resizable-enabled"></div>/**\r
+     * @cfg {Boolean} enabled False to disable resizing (defaults to true)\r
+     */\r
+    enabled : true,\r
+    <div id="prop-Ext.Resizable-enabled"></div>/**\r
+     * @property enabled Writable. False if resizing is disabled.\r
+     * @type Boolean \r
+     */\r
+    <div id="cfg-Ext.Resizable-handles"></div>/**\r
+     * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).\r
+     * Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.\r
+     */\r
+    handles : false,\r
+    <div id="cfg-Ext.Resizable-multiDirectional"></div>/**\r
+     * @cfg {Boolean} multiDirectional <b>Deprecated</b>.  Deprecated style of adding multi-direction resize handles.\r
+     */\r
+    multiDirectional : false,\r
+    <div id="cfg-Ext.Resizable-height"></div>/**\r
+     * @cfg {Number} height The height of the element in pixels (defaults to null)\r
+     */\r
+    height : null,\r
+    <div id="cfg-Ext.Resizable-width"></div>/**\r
+     * @cfg {Number} width The width of the element in pixels (defaults to null)\r
+     */\r
+    width : null,\r
+    <div id="cfg-Ext.Resizable-heightIncrement"></div>/**\r
+     * @cfg {Number} heightIncrement The increment to snap the height resize in pixels\r
+     * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.\r
+     */\r
+    heightIncrement : 0,\r
+    <div id="cfg-Ext.Resizable-widthIncrement"></div>/**\r
+     * @cfg {Number} widthIncrement The increment to snap the width resize in pixels\r
+     * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.\r
+     */\r
+    widthIncrement : 0,\r
+    <div id="cfg-Ext.Resizable-minHeight"></div>/**\r
+     * @cfg {Number} minHeight The minimum height for the element (defaults to 5)\r
+     */\r
+    minHeight : 5,\r
+    <div id="cfg-Ext.Resizable-minWidth"></div>/**\r
+     * @cfg {Number} minWidth The minimum width for the element (defaults to 5)\r
+     */\r
+    minWidth : 5,\r
+    <div id="cfg-Ext.Resizable-maxHeight"></div>/**\r
+     * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)\r
+     */\r
+    maxHeight : 10000,\r
+    <div id="cfg-Ext.Resizable-maxWidth"></div>/**\r
+     * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)\r
+     */\r
+    maxWidth : 10000,\r
+    <div id="cfg-Ext.Resizable-minX"></div>/**\r
+     * @cfg {Number} minX The minimum x for the element (defaults to 0)\r
+     */\r
+    minX: 0,\r
+    <div id="cfg-Ext.Resizable-minY"></div>/**\r
+     * @cfg {Number} minY The minimum x for the element (defaults to 0)\r
+     */\r
+    minY: 0,\r
+    <div id="cfg-Ext.Resizable-pinned"></div>/**\r
+     * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the\r
+     * user mouses over the resizable borders. This is only applied at config time. (defaults to false)\r
+     */\r
+    pinned : false,\r
+    <div id="cfg-Ext.Resizable-preserveRatio"></div>/**\r
+     * @cfg {Boolean} preserveRatio True to preserve the original ratio between height\r
+     * and width during resize (defaults to false)\r
+     */\r
+    preserveRatio : false,\r
+    <div id="cfg-Ext.Resizable-resizeChild"></div>/**\r
+     * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false) \r
+     */ \r
+    resizeChild : false,\r
+    <div id="cfg-Ext.Resizable-transparent"></div>/**\r
+     * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)\r
+     */\r
+    transparent: false,\r
+    <div id="cfg-Ext.Resizable-resizeRegion"></div>/**\r
+     * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region\r
+     */\r
+    <div id="cfg-Ext.Resizable-wrap"></div>/**\r
+     * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)\r
+     * in favor of the handles config option (defaults to false)\r
+     */\r
+\r
+    \r
+    <div id="method-Ext.Resizable-resizeTo"></div>/**\r
+     * Perform a manual resize and fires the 'resize' event.\r
+     * @param {Number} width\r
+     * @param {Number} height\r
+     */\r
+    resizeTo : function(width, height){\r
+        this.el.setSize(width, height);\r
+        this.updateChildSize();\r
+        this.fireEvent('resize', this, width, height, null);\r
+    },\r
+\r
+    // private\r
+    startSizing : function(e, handle){\r
+        this.fireEvent('beforeresize', this, e);\r
+        if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler\r
+\r
+            if(!this.overlay){\r
+                this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: '&#160;'}, Ext.getBody());\r
+                this.overlay.unselectable();\r
+                this.overlay.enableDisplayMode('block');\r
+                this.overlay.on({\r
+                    scope: this,\r
+                    mousemove: this.onMouseMove,\r
+                    mouseup: this.onMouseUp\r
+                });\r
+            }\r
+            this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));\r
+\r
+            this.resizing = true;\r
+            this.startBox = this.el.getBox();\r
+            this.startPoint = e.getXY();\r
+            this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],\r
+                            (this.startBox.y + this.startBox.height) - this.startPoint[1]];\r
+\r
+            this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));\r
+            this.overlay.show();\r
+\r
+            if(this.constrainTo) {\r
+                var ct = Ext.get(this.constrainTo);\r
+                this.resizeRegion = ct.getRegion().adjust(\r
+                    ct.getFrameWidth('t'),\r
+                    ct.getFrameWidth('l'),\r
+                    -ct.getFrameWidth('b'),\r
+                    -ct.getFrameWidth('r')\r
+                );\r
+            }\r
+\r
+            this.proxy.setStyle('visibility', 'hidden'); // workaround display none\r
+            this.proxy.show();\r
+            this.proxy.setBox(this.startBox);\r
+            if(!this.dynamic){\r
+                this.proxy.setStyle('visibility', 'visible');\r
+            }\r
+        }\r
+    },\r
+\r
+    // private\r
+    onMouseDown : function(handle, e){\r
+        if(this.enabled){\r
+            e.stopEvent();\r
+            this.activeHandle = handle;\r
+            this.startSizing(e, handle);\r
+        }          \r
+    },\r
+\r
+    // private\r
+    onMouseUp : function(e){\r
+        this.activeHandle = null;\r
+        var size = this.resizeElement();\r
+        this.resizing = false;\r
+        this.handleOut();\r
+        this.overlay.hide();\r
+        this.proxy.hide();\r
+        this.fireEvent('resize', this, size.width, size.height, e);\r
+    },\r
+\r
+    // private\r
+    updateChildSize : function(){\r
+        if(this.resizeChild){\r
+            var el = this.el;\r
+            var child = this.resizeChild;\r
+            var adj = this.adjustments;\r
+            if(el.dom.offsetWidth){\r
+                var b = el.getSize(true);\r
+                child.setSize(b.width+adj[0], b.height+adj[1]);\r
+            }\r
+            // Second call here for IE\r
+            // The first call enables instant resizing and\r
+            // the second call corrects scroll bars if they\r
+            // exist\r
+            if(Ext.isIE){\r
+                setTimeout(function(){\r
+                    if(el.dom.offsetWidth){\r
+                        var b = el.getSize(true);\r
+                        child.setSize(b.width+adj[0], b.height+adj[1]);\r
+                    }\r
+                }, 10);\r
+            }\r
+        }\r
+    },\r
+\r
+    // private\r
+    snap : function(value, inc, min){\r
+        if(!inc || !value){\r
+            return value;\r
+        }\r
+        var newValue = value;\r
+        var m = value % inc;\r
+        if(m > 0){\r
+            if(m > (inc/2)){\r
+                newValue = value + (inc-m);\r
+            }else{\r
+                newValue = value - m;\r
+            }\r
+        }\r
+        return Math.max(min, newValue);\r
+    },\r
+\r
+    <div id="method-Ext.Resizable-resizeElement"></div>/**\r
+     * <p>Performs resizing of the associated Element. This method is called internally by this\r
+     * class, and should not be called by user code.</p>\r
+     * <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI\r
+     * component such as a Panel, this method may be overridden by specifying an implementation\r
+     * as a config option to provide appropriate behaviour at the end of the resize operation on\r
+     * mouseup, for example resizing the Panel, and relaying the Panel's content.</p>\r
+     * <p>The new area to be resized to is available by examining the state of the {@link #proxy}\r
+     * Element. Example:\r
+<pre><code>\r
+new Ext.Panel({\r
+    title: 'Resize me',\r
+    x: 100,\r
+    y: 100,\r
+    renderTo: Ext.getBody(),\r
+    floating: true,\r
+    frame: true,\r
+    width: 400,\r
+    height: 200,\r
+    listeners: {\r
+        render: function(p) {\r
+            new Ext.Resizable(p.getEl(), {\r
+                handles: 'all',\r
+                pinned: true,\r
+                transparent: true,\r
+                resizeElement: function() {\r
+                    var box = this.proxy.getBox();\r
+                    p.updateBox(box);\r
+                    if (p.layout) {\r
+                        p.doLayout();\r
+                    }\r
+                    return box;\r
+                }\r
+           });\r
+       }\r
+    }\r
+}).show();\r
+</code></pre>\r
+     */\r
+    resizeElement : function(){\r
+        var box = this.proxy.getBox();\r
+        if(this.updateBox){\r
+            this.el.setBox(box, false, this.animate, this.duration, null, this.easing);\r
+        }else{\r
+            this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);\r
+        }\r
+        this.updateChildSize();\r
+        if(!this.dynamic){\r
+            this.proxy.hide();\r
+        }\r
+        return box;\r
+    },\r
+\r
+    // private\r
+    constrain : function(v, diff, m, mx){\r
+        if(v - diff < m){\r
+            diff = v - m;    \r
+        }else if(v - diff > mx){\r
+            diff = v - mx; \r
+        }\r
+        return diff;                \r
+    },\r
+\r
+    // private\r
+    onMouseMove : function(e){\r
+        if(this.enabled && this.activeHandle){\r
+            try{// try catch so if something goes wrong the user doesn't get hung\r
+\r
+            if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {\r
+                return;\r
+            }\r
+\r
+            //var curXY = this.startPoint;\r
+            var curSize = this.curSize || this.startBox,\r
+                x = this.startBox.x, y = this.startBox.y,\r
+                ox = x, \r
+                oy = y,\r
+                w = curSize.width, \r
+                h = curSize.height,\r
+                ow = w, \r
+                oh = h,\r
+                mw = this.minWidth, \r
+                mh = this.minHeight,\r
+                mxw = this.maxWidth, \r
+                mxh = this.maxHeight,\r
+                wi = this.widthIncrement,\r
+                hi = this.heightIncrement,\r
+                eventXY = e.getXY(),\r
+                diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),\r
+                diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),\r
+                pos = this.activeHandle.position,\r
+                tw,\r
+                th;\r
+            \r
+            switch(pos){\r
+                case 'east':\r
+                    w += diffX; \r
+                    w = Math.min(Math.max(mw, w), mxw);\r
+                    break;\r
+                case 'south':\r
+                    h += diffY;\r
+                    h = Math.min(Math.max(mh, h), mxh);\r
+                    break;\r
+                case 'southeast':\r
+                    w += diffX; \r
+                    h += diffY;\r
+                    w = Math.min(Math.max(mw, w), mxw);\r
+                    h = Math.min(Math.max(mh, h), mxh);\r
+                    break;\r
+                case 'north':\r
+                    diffY = this.constrain(h, diffY, mh, mxh);\r
+                    y += diffY;\r
+                    h -= diffY;\r
+                    break;\r
+                case 'west':\r
+                    diffX = this.constrain(w, diffX, mw, mxw);\r
+                    x += diffX;\r
+                    w -= diffX;\r
+                    break;\r
+                case 'northeast':\r
+                    w += diffX; \r
+                    w = Math.min(Math.max(mw, w), mxw);\r
+                    diffY = this.constrain(h, diffY, mh, mxh);\r
+                    y += diffY;\r
+                    h -= diffY;\r
+                    break;\r
+                case 'northwest':\r
+                    diffX = this.constrain(w, diffX, mw, mxw);\r
+                    diffY = this.constrain(h, diffY, mh, mxh);\r
+                    y += diffY;\r
+                    h -= diffY;\r
+                    x += diffX;\r
+                    w -= diffX;\r
+                    break;\r
+               case 'southwest':\r
+                    diffX = this.constrain(w, diffX, mw, mxw);\r
+                    h += diffY;\r
+                    h = Math.min(Math.max(mh, h), mxh);\r
+                    x += diffX;\r
+                    w -= diffX;\r
+                    break;\r
+            }\r
+            \r
+            var sw = this.snap(w, wi, mw);\r
+            var sh = this.snap(h, hi, mh);\r
+            if(sw != w || sh != h){\r
+                switch(pos){\r
+                    case 'northeast':\r
+                        y -= sh - h;\r
+                    break;\r
+                    case 'north':\r
+                        y -= sh - h;\r
+                        break;\r
+                    case 'southwest':\r
+                        x -= sw - w;\r
+                    break;\r
+                    case 'west':\r
+                        x -= sw - w;\r
+                        break;\r
+                    case 'northwest':\r
+                        x -= sw - w;\r
+                        y -= sh - h;\r
+                    break;\r
+                }\r
+                w = sw;\r
+                h = sh;\r
+            }\r
+            \r
+            if(this.preserveRatio){\r
+                switch(pos){\r
+                    case 'southeast':\r
+                    case 'east':\r
+                        h = oh * (w/ow);\r
+                        h = Math.min(Math.max(mh, h), mxh);\r
+                        w = ow * (h/oh);\r
+                       break;\r
+                    case 'south':\r
+                        w = ow * (h/oh);\r
+                        w = Math.min(Math.max(mw, w), mxw);\r
+                        h = oh * (w/ow);\r
+                        break;\r
+                    case 'northeast':\r
+                        w = ow * (h/oh);\r
+                        w = Math.min(Math.max(mw, w), mxw);\r
+                        h = oh * (w/ow);\r
+                    break;\r
+                    case 'north':\r
+                        tw = w;\r
+                        w = ow * (h/oh);\r
+                        w = Math.min(Math.max(mw, w), mxw);\r
+                        h = oh * (w/ow);\r
+                        x += (tw - w) / 2;\r
+                        break;\r
+                    case 'southwest':\r
+                        h = oh * (w/ow);\r
+                        h = Math.min(Math.max(mh, h), mxh);\r
+                        tw = w;\r
+                        w = ow * (h/oh);\r
+                        x += tw - w;\r
+                        break;\r
+                    case 'west':\r
+                        th = h;\r
+                        h = oh * (w/ow);\r
+                        h = Math.min(Math.max(mh, h), mxh);\r
+                        y += (th - h) / 2;\r
+                        tw = w;\r
+                        w = ow * (h/oh);\r
+                        x += tw - w;\r
+                       break;\r
+                    case 'northwest':\r
+                        tw = w;\r
+                        th = h;\r
+                        h = oh * (w/ow);\r
+                        h = Math.min(Math.max(mh, h), mxh);\r
+                        w = ow * (h/oh);\r
+                        y += th - h;\r
+                        x += tw - w;\r
+                        break;\r
+                        \r
+                }\r
+            }\r
+            this.proxy.setBounds(x, y, w, h);\r
+            if(this.dynamic){\r
+                this.resizeElement();\r
+            }\r
+            }catch(ex){}\r
+        }\r
+    },\r
+\r
+    // private\r
+    handleOver : function(){\r
+        if(this.enabled){\r
+            this.el.addClass('x-resizable-over');\r
+        }\r
+    },\r
+\r
+    // private\r
+    handleOut : function(){\r
+        if(!this.resizing){\r
+            this.el.removeClass('x-resizable-over');\r
+        }\r
+    },\r
+    \r
+    <div id="method-Ext.Resizable-getEl"></div>/**\r
+     * Returns the element this component is bound to.\r
+     * @return {Ext.Element}\r
+     */\r
+    getEl : function(){\r
+        return this.el;\r
+    },\r
+    \r
+    <div id="method-Ext.Resizable-getResizeChild"></div>/**\r
+     * Returns the resizeChild element (or null).\r
+     * @return {Ext.Element}\r
+     */\r
+    getResizeChild : function(){\r
+        return this.resizeChild;\r
+    },\r
+    \r
+    <div id="method-Ext.Resizable-destroy"></div>/**\r
+     * Destroys this resizable. If the element was wrapped and \r
+     * removeEl is not true then the element remains.\r
+     * @param {Boolean} removeEl (optional) true to remove the element from the DOM\r
+     */\r
+    destroy : function(removeEl){\r
+        Ext.destroy(this.dd, this.overlay, this.proxy);\r
+        this.overlay = null;\r
+        this.proxy = null;\r
+        \r
+        var ps = Ext.Resizable.positions;\r
+        for(var k in ps){\r
+            if(typeof ps[k] != 'function' && this[ps[k]]){\r
+                this[ps[k]].destroy();\r
+            }\r
+        }\r
+        if(removeEl){\r
+            this.el.update('');\r
+            Ext.destroy(this.el);\r
+            this.el = null;\r
+        }\r
+        this.purgeListeners();\r
+    },\r
+\r
+    syncHandleHeight : function(){\r
+        var h = this.el.getHeight(true);\r
+        if(this.west){\r
+            this.west.el.setHeight(h);\r
+        }\r
+        if(this.east){\r
+            this.east.el.setHeight(h);\r
+        }\r
+    }\r
+});\r
+\r
+// private\r
+// hash to map config positions to true positions\r
+Ext.Resizable.positions = {\r
+    n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'\r
+};\r
+\r
+// private\r
+Ext.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){\r
+    if(!this.tpl){\r
+        // only initialize the template if resizable is used\r
+        var tpl = Ext.DomHelper.createTemplate(\r
+            {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}\r
+        );\r
+        tpl.compile();\r
+        Ext.Resizable.Handle.prototype.tpl = tpl;\r
+    }\r
+    this.position = pos;\r
+    this.rz = rz;\r
+    this.el = this.tpl.append(rz.el.dom, [this.position], true);\r
+    this.el.unselectable();\r
+    if(transparent){\r
+        this.el.setOpacity(0);\r
+    }\r
+    this.el.on('mousedown', this.onMouseDown, this);\r
+    if(!disableTrackOver){\r
+        this.el.on({\r
+            scope: this,\r
+            mouseover: this.onMouseOver,\r
+            mouseout: this.onMouseOut\r
+        });\r
+    }\r
+};\r
+\r
+// private\r
+Ext.Resizable.Handle.prototype = {\r
+    // private\r
+    afterResize : function(rz){\r
+        // do nothing    \r
+    },\r
+    // private\r
+    onMouseDown : function(e){\r
+        this.rz.onMouseDown(this, e);\r
+    },\r
+    // private\r
+    onMouseOver : function(e){\r
+        this.rz.handleOver(this, e);\r
+    },\r
+    // private\r
+    onMouseOut : function(e){\r
+        this.rz.handleOut(this, e);\r
+    },\r
+    // private\r
+    destroy : function(){\r
+        Ext.destroy(this.el);\r
+        this.el = null;\r
+    }\r
+};\r
+</pre>    \r
+</body>\r
+</html>
\ No newline at end of file