src/widgets/Resizable.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /*!\r
   8  * Ext JS Library 3.1.1\r
   9  * Copyright(c) 2006-2010 Ext JS, LLC\r
  10  * licensing@extjs.com\r
  11  * http://www.extjs.com/license\r
  12  */\r
  13 /**\r
  14  * @class Ext.Resizable\r
  15  * @extends Ext.util.Observable\r
  16  * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element \r
  17  * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap\r
  18  * 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
  19  * the element will be wrapped for you automatically.</p>\r
  20  * <p>Here is the list of valid resize handles:</p>\r
  21  * <pre>\r
  22 Value   Description\r
  23 ------  -------------------\r
  24  'n'     north\r
  25  's'     south\r
  26  'e'     east\r
  27  'w'     west\r
  28  'nw'    northwest\r
  29  'sw'    southwest\r
  30  'se'    southeast\r
  31  'ne'    northeast\r
  32  'all'   all\r
  33 </pre>\r
  34  * <p>Here's an example showing the creation of a typical Resizable:</p>\r
  35  * <pre><code>\r
  36 var resizer = new Ext.Resizable('element-id', {\r
  37     handles: 'all',\r
  38     minWidth: 200,\r
  39     minHeight: 100,\r
  40     maxWidth: 500,\r
  41     maxHeight: 400,\r
  42     pinned: true\r
  43 });\r
  44 resizer.on('resize', myHandler);\r
  45 </code></pre>\r
  46  * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>\r
  47  * resizer.east.setDisplayed(false);</p>\r
  48  * @constructor\r
  49  * Create a new resizable component\r
  50  * @param {Mixed} el The id or element to resize\r
  51  * @param {Object} config configuration options\r
  52   */\r
  53 Ext.Resizable = Ext.extend(Ext.util.Observable, {\r
  54     \r
  55     constructor: function(el, config){\r
  56         this.el = Ext.get(el);\r
  57         if(config && config.wrap){\r
  58             config.resizeChild = this.el;\r
  59             this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});\r
  60             this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';\r
  61             this.el.setStyle('overflow', 'hidden');\r
  62             this.el.setPositioning(config.resizeChild.getPositioning());\r
  63             config.resizeChild.clearPositioning();\r
  64             if(!config.width || !config.height){\r
  65                 var csize = config.resizeChild.getSize();\r
  66                 this.el.setSize(csize.width, csize.height);\r
  67             }\r
  68             if(config.pinned && !config.adjustments){\r
  69                 config.adjustments = 'auto';\r
  70             }\r
  71         }\r
  72     \r
  73         /**\r
  74          * The proxy Element that is resized in place of the real Element during the resize operation.\r
  75          * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.\r
  76          * Read only.\r
  77          * @type Ext.Element.\r
  78          * @property proxy\r
  79          */\r
  80         this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());\r
  81         this.proxy.unselectable();\r
  82         this.proxy.enableDisplayMode('block');\r
  83     \r
  84         Ext.apply(this, config);\r
  85         \r
  86         if(this.pinned){\r
  87             this.disableTrackOver = true;\r
  88             this.el.addClass('x-resizable-pinned');\r
  89         }\r
  90         // if the element isn't positioned, make it relative\r
  91         var position = this.el.getStyle('position');\r
  92         if(position != 'absolute' && position != 'fixed'){\r
  93             this.el.setStyle('position', 'relative');\r
  94         }\r
  95         if(!this.handles){ // no handles passed, must be legacy style\r
  96             this.handles = 's,e,se';\r
  97             if(this.multiDirectional){\r
  98                 this.handles += ',n,w';\r
  99             }\r
 100         }\r
 101         if(this.handles == 'all'){\r
 102             this.handles = 'n s e w ne nw se sw';\r
 103         }\r
 104         var hs = this.handles.split(/\s*?[,;]\s*?| /);\r
 105         var ps = Ext.Resizable.positions;\r
 106         for(var i = 0, len = hs.length; i < len; i++){\r
 107             if(hs[i] && ps[hs[i]]){\r
 108                 var pos = ps[hs[i]];\r
 109                 this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent, this.handleCls);\r
 110             }\r
 111         }\r
 112         // legacy\r
 113         this.corner = this.southeast;\r
 114         \r
 115         if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){\r
 116             this.updateBox = true;\r
 117         }   \r
 118        \r
 119         this.activeHandle = null;\r
 120         \r
 121         if(this.resizeChild){\r
 122             if(typeof this.resizeChild == 'boolean'){\r
 123                 this.resizeChild = Ext.get(this.el.dom.firstChild, true);\r
 124             }else{\r
 125                 this.resizeChild = Ext.get(this.resizeChild, true);\r
 126             }\r
 127         }\r
 128         \r
 129         if(this.adjustments == 'auto'){\r
 130             var rc = this.resizeChild;\r
 131             var hw = this.west, he = this.east, hn = this.north, hs = this.south;\r
 132             if(rc && (hw || hn)){\r
 133                 rc.position('relative');\r
 134                 rc.setLeft(hw ? hw.el.getWidth() : 0);\r
 135                 rc.setTop(hn ? hn.el.getHeight() : 0);\r
 136             }\r
 137             this.adjustments = [\r
 138                 (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),\r
 139                 (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1 \r
 140             ];\r
 141         }\r
 142         \r
 143         if(this.draggable){\r
 144             this.dd = this.dynamic ? \r
 145                 this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});\r
 146             this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);\r
 147             if(this.constrainTo){\r
 148                 this.dd.constrainTo(this.constrainTo);\r
 149             }\r
 150         }\r
 151         \r
 152         this.addEvents(\r
 153             /**\r
 154              * @event beforeresize\r
 155              * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.\r
 156              * @param {Ext.Resizable} this\r
 157              * @param {Ext.EventObject} e The mousedown event\r
 158              */\r
 159             'beforeresize',\r
 160             /**\r
 161              * @event resize\r
 162              * Fired after a resize.\r
 163              * @param {Ext.Resizable} this\r
 164              * @param {Number} width The new width\r
 165              * @param {Number} height The new height\r
 166              * @param {Ext.EventObject} e The mouseup event\r
 167              */\r
 168             'resize'\r
 169         );\r
 170         \r
 171         if(this.width !== null && this.height !== null){\r
 172             this.resizeTo(this.width, this.height);\r
 173         }else{\r
 174             this.updateChildSize();\r
 175         }\r
 176         if(Ext.isIE){\r
 177             this.el.dom.style.zoom = 1;\r
 178         }\r
 179         Ext.Resizable.superclass.constructor.call(this);    \r
 180     },\r
 181 \r
 182     /**\r
 183      * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the\r
 184      * resize operation's new size (defaults to <tt>[0, 0]</tt>)\r
 185      */\r
 186     adjustments : [0, 0],\r
 187     /**\r
 188      * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)\r
 189      */\r
 190     animate : false,\r
 191     /**\r
 192      * @cfg {Mixed} constrainTo Constrain the resize to a particular element\r
 193      */\r
 194     /**\r
 195      * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)\r
 196      */\r
 197     disableTrackOver : false,\r
 198     /**\r
 199      * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)\r
 200      */\r
 201     draggable: false,\r
 202     /**\r
 203      * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)\r
 204      */\r
 205     duration : 0.35,\r
 206     /**\r
 207      * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)\r
 208      */\r
 209     dynamic : false,\r
 210     /**\r
 211      * @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)\r
 212      */\r
 213     easing : 'easeOutStrong',\r
 214     /**\r
 215      * @cfg {Boolean} enabled False to disable resizing (defaults to true)\r
 216      */\r
 217     enabled : true,\r
 218     /**\r
 219      * @property enabled Writable. False if resizing is disabled.\r
 220      * @type Boolean \r
 221      */\r
 222     /**\r
 223      * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).\r
 224      * Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.\r
 225      */\r
 226     handles : false,\r
 227     /**\r
 228      * @cfg {Boolean} multiDirectional <b>Deprecated</b>.  Deprecated style of adding multi-direction resize handles.\r
 229      */\r
 230     multiDirectional : false,\r
 231     /**\r
 232      * @cfg {Number} height The height of the element in pixels (defaults to null)\r
 233      */\r
 234     height : null,\r
 235     /**\r
 236      * @cfg {Number} width The width of the element in pixels (defaults to null)\r
 237      */\r
 238     width : null,\r
 239     /**\r
 240      * @cfg {Number} heightIncrement The increment to snap the height resize in pixels\r
 241      * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.\r
 242      */\r
 243     heightIncrement : 0,\r
 244     /**\r
 245      * @cfg {Number} widthIncrement The increment to snap the width resize in pixels\r
 246      * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.\r
 247      */\r
 248     widthIncrement : 0,\r
 249     /**\r
 250      * @cfg {Number} minHeight The minimum height for the element (defaults to 5)\r
 251      */\r
 252     minHeight : 5,\r
 253     /**\r
 254      * @cfg {Number} minWidth The minimum width for the element (defaults to 5)\r
 255      */\r
 256     minWidth : 5,\r
 257     /**\r
 258      * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)\r
 259      */\r
 260     maxHeight : 10000,\r
 261     /**\r
 262      * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)\r
 263      */\r
 264     maxWidth : 10000,\r
 265     /**\r
 266      * @cfg {Number} minX The minimum x for the element (defaults to 0)\r
 267      */\r
 268     minX: 0,\r
 269     /**\r
 270      * @cfg {Number} minY The minimum x for the element (defaults to 0)\r
 271      */\r
 272     minY: 0,\r
 273     /**\r
 274      * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the\r
 275      * user mouses over the resizable borders. This is only applied at config time. (defaults to false)\r
 276      */\r
 277     pinned : false,\r
 278     /**\r
 279      * @cfg {Boolean} preserveRatio True to preserve the original ratio between height\r
 280      * and width during resize (defaults to false)\r
 281      */\r
 282     preserveRatio : false,\r
 283     /**\r
 284      * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false) \r
 285      */ \r
 286     resizeChild : false,\r
 287     /**\r
 288      * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)\r
 289      */\r
 290     transparent: false,\r
 291     /**\r
 292      * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region\r
 293      */\r
 294     /**\r
 295      * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)\r
 296      * in favor of the handles config option (defaults to false)\r
 297      */\r
 298     /**\r
 299      * @cfg {String} handleCls A css class to add to each handle. Defaults to <tt>''</tt>.\r
 300      */\r
 301 \r
 302     \r
 303     /**\r
 304      * Perform a manual resize and fires the 'resize' event.\r
 305      * @param {Number} width\r
 306      * @param {Number} height\r
 307      */\r
 308     resizeTo : function(width, height){\r
 309         this.el.setSize(width, height);\r
 310         this.updateChildSize();\r
 311         this.fireEvent('resize', this, width, height, null);\r
 312     },\r
 313 \r
 314     // private\r
 315     startSizing : function(e, handle){\r
 316         this.fireEvent('beforeresize', this, e);\r
 317         if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler\r
 318 \r
 319             if(!this.overlay){\r
 320                 this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: '&#160;'}, Ext.getBody());\r
 321                 this.overlay.unselectable();\r
 322                 this.overlay.enableDisplayMode('block');\r
 323                 this.overlay.on({\r
 324                     scope: this,\r
 325                     mousemove: this.onMouseMove,\r
 326                     mouseup: this.onMouseUp\r
 327                 });\r
 328             }\r
 329             this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));\r
 330 \r
 331             this.resizing = true;\r
 332             this.startBox = this.el.getBox();\r
 333             this.startPoint = e.getXY();\r
 334             this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],\r
 335                             (this.startBox.y + this.startBox.height) - this.startPoint[1]];\r
 336 \r
 337             this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));\r
 338             this.overlay.show();\r
 339 \r
 340             if(this.constrainTo) {\r
 341                 var ct = Ext.get(this.constrainTo);\r
 342                 this.resizeRegion = ct.getRegion().adjust(\r
 343                     ct.getFrameWidth('t'),\r
 344                     ct.getFrameWidth('l'),\r
 345                     -ct.getFrameWidth('b'),\r
 346                     -ct.getFrameWidth('r')\r
 347                 );\r
 348             }\r
 349 \r
 350             this.proxy.setStyle('visibility', 'hidden'); // workaround display none\r
 351             this.proxy.show();\r
 352             this.proxy.setBox(this.startBox);\r
 353             if(!this.dynamic){\r
 354                 this.proxy.setStyle('visibility', 'visible');\r
 355             }\r
 356         }\r
 357     },\r
 358 \r
 359     // private\r
 360     onMouseDown : function(handle, e){\r
 361         if(this.enabled){\r
 362             e.stopEvent();\r
 363             this.activeHandle = handle;\r
 364             this.startSizing(e, handle);\r
 365         }          \r
 366     },\r
 367 \r
 368     // private\r
 369     onMouseUp : function(e){\r
 370         this.activeHandle = null;\r
 371         var size = this.resizeElement();\r
 372         this.resizing = false;\r
 373         this.handleOut();\r
 374         this.overlay.hide();\r
 375         this.proxy.hide();\r
 376         this.fireEvent('resize', this, size.width, size.height, e);\r
 377     },\r
 378 \r
 379     // private\r
 380     updateChildSize : function(){\r
 381         if(this.resizeChild){\r
 382             var el = this.el;\r
 383             var child = this.resizeChild;\r
 384             var adj = this.adjustments;\r
 385             if(el.dom.offsetWidth){\r
 386                 var b = el.getSize(true);\r
 387                 child.setSize(b.width+adj[0], b.height+adj[1]);\r
 388             }\r
 389             // Second call here for IE\r
 390             // The first call enables instant resizing and\r
 391             // the second call corrects scroll bars if they\r
 392             // exist\r
 393             if(Ext.isIE){\r
 394                 setTimeout(function(){\r
 395                     if(el.dom.offsetWidth){\r
 396                         var b = el.getSize(true);\r
 397                         child.setSize(b.width+adj[0], b.height+adj[1]);\r
 398                     }\r
 399                 }, 10);\r
 400             }\r
 401         }\r
 402     },\r
 403 \r
 404     // private\r
 405     snap : function(value, inc, min){\r
 406         if(!inc || !value){\r
 407             return value;\r
 408         }\r
 409         var newValue = value;\r
 410         var m = value % inc;\r
 411         if(m > 0){\r
 412             if(m > (inc/2)){\r
 413                 newValue = value + (inc-m);\r
 414             }else{\r
 415                 newValue = value - m;\r
 416             }\r
 417         }\r
 418         return Math.max(min, newValue);\r
 419     },\r
 420 \r
 421     /**\r
 422      * <p>Performs resizing of the associated Element. This method is called internally by this\r
 423      * class, and should not be called by user code.</p>\r
 424      * <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI\r
 425      * component such as a Panel, this method may be overridden by specifying an implementation\r
 426      * as a config option to provide appropriate behaviour at the end of the resize operation on\r
 427      * mouseup, for example resizing the Panel, and relaying the Panel's content.</p>\r
 428      * <p>The new area to be resized to is available by examining the state of the {@link #proxy}\r
 429      * Element. Example:\r
 430 <pre><code>\r
 431 new Ext.Panel({\r
 432     title: 'Resize me',\r
 433     x: 100,\r
 434     y: 100,\r
 435     renderTo: Ext.getBody(),\r
 436     floating: true,\r
 437     frame: true,\r
 438     width: 400,\r
 439     height: 200,\r
 440     listeners: {\r
 441         render: function(p) {\r
 442             new Ext.Resizable(p.getEl(), {\r
 443                 handles: 'all',\r
 444                 pinned: true,\r
 445                 transparent: true,\r
 446                 resizeElement: function() {\r
 447                     var box = this.proxy.getBox();\r
 448                     p.updateBox(box);\r
 449                     if (p.layout) {\r
 450                         p.doLayout();\r
 451                     }\r
 452                     return box;\r
 453                 }\r
 454            });\r
 455        }\r
 456     }\r
 457 }).show();\r
 458 </code></pre>\r
 459      */\r
 460     resizeElement : function(){\r
 461         var box = this.proxy.getBox();\r
 462         if(this.updateBox){\r
 463             this.el.setBox(box, false, this.animate, this.duration, null, this.easing);\r
 464         }else{\r
 465             this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);\r
 466         }\r
 467         this.updateChildSize();\r
 468         if(!this.dynamic){\r
 469             this.proxy.hide();\r
 470         }\r
 471         if(this.draggable && this.constrainTo){\r
 472             this.dd.resetConstraints();\r
 473             this.dd.constrainTo(this.constrainTo);\r
 474         }\r
 475         return box;\r
 476     },\r
 477 \r
 478     // private\r
 479     constrain : function(v, diff, m, mx){\r
 480         if(v - diff < m){\r
 481             diff = v - m;    \r
 482         }else if(v - diff > mx){\r
 483             diff = v - mx; \r
 484         }\r
 485         return diff;                \r
 486     },\r
 487 \r
 488     // private\r
 489     onMouseMove : function(e){\r
 490         if(this.enabled && this.activeHandle){\r
 491             try{// try catch so if something goes wrong the user doesn't get hung\r
 492 \r
 493             if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {\r
 494                 return;\r
 495             }\r
 496 \r
 497             //var curXY = this.startPoint;\r
 498             var curSize = this.curSize || this.startBox,\r
 499                 x = this.startBox.x, y = this.startBox.y,\r
 500                 ox = x, \r
 501                 oy = y,\r
 502                 w = curSize.width, \r
 503                 h = curSize.height,\r
 504                 ow = w, \r
 505                 oh = h,\r
 506                 mw = this.minWidth, \r
 507                 mh = this.minHeight,\r
 508                 mxw = this.maxWidth, \r
 509                 mxh = this.maxHeight,\r
 510                 wi = this.widthIncrement,\r
 511                 hi = this.heightIncrement,\r
 512                 eventXY = e.getXY(),\r
 513                 diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),\r
 514                 diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),\r
 515                 pos = this.activeHandle.position,\r
 516                 tw,\r
 517                 th;\r
 518             \r
 519             switch(pos){\r
 520                 case 'east':\r
 521                     w += diffX; \r
 522                     w = Math.min(Math.max(mw, w), mxw);\r
 523                     break;\r
 524                 case 'south':\r
 525                     h += diffY;\r
 526                     h = Math.min(Math.max(mh, h), mxh);\r
 527                     break;\r
 528                 case 'southeast':\r
 529                     w += diffX; \r
 530                     h += diffY;\r
 531                     w = Math.min(Math.max(mw, w), mxw);\r
 532                     h = Math.min(Math.max(mh, h), mxh);\r
 533                     break;\r
 534                 case 'north':\r
 535                     diffY = this.constrain(h, diffY, mh, mxh);\r
 536                     y += diffY;\r
 537                     h -= diffY;\r
 538                     break;\r
 539                 case 'west':\r
 540                     diffX = this.constrain(w, diffX, mw, mxw);\r
 541                     x += diffX;\r
 542                     w -= diffX;\r
 543                     break;\r
 544                 case 'northeast':\r
 545                     w += diffX; \r
 546                     w = Math.min(Math.max(mw, w), mxw);\r
 547                     diffY = this.constrain(h, diffY, mh, mxh);\r
 548                     y += diffY;\r
 549                     h -= diffY;\r
 550                     break;\r
 551                 case 'northwest':\r
 552                     diffX = this.constrain(w, diffX, mw, mxw);\r
 553                     diffY = this.constrain(h, diffY, mh, mxh);\r
 554                     y += diffY;\r
 555                     h -= diffY;\r
 556                     x += diffX;\r
 557                     w -= diffX;\r
 558                     break;\r
 559                case 'southwest':\r
 560                     diffX = this.constrain(w, diffX, mw, mxw);\r
 561                     h += diffY;\r
 562                     h = Math.min(Math.max(mh, h), mxh);\r
 563                     x += diffX;\r
 564                     w -= diffX;\r
 565                     break;\r
 566             }\r
 567             \r
 568             var sw = this.snap(w, wi, mw);\r
 569             var sh = this.snap(h, hi, mh);\r
 570             if(sw != w || sh != h){\r
 571                 switch(pos){\r
 572                     case 'northeast':\r
 573                         y -= sh - h;\r
 574                     break;\r
 575                     case 'north':\r
 576                         y -= sh - h;\r
 577                         break;\r
 578                     case 'southwest':\r
 579                         x -= sw - w;\r
 580                     break;\r
 581                     case 'west':\r
 582                         x -= sw - w;\r
 583                         break;\r
 584                     case 'northwest':\r
 585                         x -= sw - w;\r
 586                         y -= sh - h;\r
 587                     break;\r
 588                 }\r
 589                 w = sw;\r
 590                 h = sh;\r
 591             }\r
 592             \r
 593             if(this.preserveRatio){\r
 594                 switch(pos){\r
 595                     case 'southeast':\r
 596                     case 'east':\r
 597                         h = oh * (w/ow);\r
 598                         h = Math.min(Math.max(mh, h), mxh);\r
 599                         w = ow * (h/oh);\r
 600                        break;\r
 601                     case 'south':\r
 602                         w = ow * (h/oh);\r
 603                         w = Math.min(Math.max(mw, w), mxw);\r
 604                         h = oh * (w/ow);\r
 605                         break;\r
 606                     case 'northeast':\r
 607                         w = ow * (h/oh);\r
 608                         w = Math.min(Math.max(mw, w), mxw);\r
 609                         h = oh * (w/ow);\r
 610                     break;\r
 611                     case 'north':\r
 612                         tw = w;\r
 613                         w = ow * (h/oh);\r
 614                         w = Math.min(Math.max(mw, w), mxw);\r
 615                         h = oh * (w/ow);\r
 616                         x += (tw - w) / 2;\r
 617                         break;\r
 618                     case 'southwest':\r
 619                         h = oh * (w/ow);\r
 620                         h = Math.min(Math.max(mh, h), mxh);\r
 621                         tw = w;\r
 622                         w = ow * (h/oh);\r
 623                         x += tw - w;\r
 624                         break;\r
 625                     case 'west':\r
 626                         th = h;\r
 627                         h = oh * (w/ow);\r
 628                         h = Math.min(Math.max(mh, h), mxh);\r
 629                         y += (th - h) / 2;\r
 630                         tw = w;\r
 631                         w = ow * (h/oh);\r
 632                         x += tw - w;\r
 633                        break;\r
 634                     case 'northwest':\r
 635                         tw = w;\r
 636                         th = h;\r
 637                         h = oh * (w/ow);\r
 638                         h = Math.min(Math.max(mh, h), mxh);\r
 639                         w = ow * (h/oh);\r
 640                         y += th - h;\r
 641                         x += tw - w;\r
 642                         break;\r
 643                         \r
 644                 }\r
 645             }\r
 646             this.proxy.setBounds(x, y, w, h);\r
 647             if(this.dynamic){\r
 648                 this.resizeElement();\r
 649             }\r
 650             }catch(ex){}\r
 651         }\r
 652     },\r
 653 \r
 654     // private\r
 655     handleOver : function(){\r
 656         if(this.enabled){\r
 657             this.el.addClass('x-resizable-over');\r
 658         }\r
 659     },\r
 660 \r
 661     // private\r
 662     handleOut : function(){\r
 663         if(!this.resizing){\r
 664             this.el.removeClass('x-resizable-over');\r
 665         }\r
 666     },\r
 667     \r
 668     /**\r
 669      * Returns the element this component is bound to.\r
 670      * @return {Ext.Element}\r
 671      */\r
 672     getEl : function(){\r
 673         return this.el;\r
 674     },\r
 675     \r
 676     /**\r
 677      * Returns the resizeChild element (or null).\r
 678      * @return {Ext.Element}\r
 679      */\r
 680     getResizeChild : function(){\r
 681         return this.resizeChild;\r
 682     },\r
 683     \r
 684     /**\r
 685      * Destroys this resizable. If the element was wrapped and \r
 686      * removeEl is not true then the element remains.\r
 687      * @param {Boolean} removeEl (optional) true to remove the element from the DOM\r
 688      */\r
 689     destroy : function(removeEl){\r
 690         Ext.destroy(this.dd, this.overlay, this.proxy);\r
 691         this.overlay = null;\r
 692         this.proxy = null;\r
 693         \r
 694         var ps = Ext.Resizable.positions;\r
 695         for(var k in ps){\r
 696             if(typeof ps[k] != 'function' && this[ps[k]]){\r
 697                 this[ps[k]].destroy();\r
 698             }\r
 699         }\r
 700         if(removeEl){\r
 701             this.el.update('');\r
 702             Ext.destroy(this.el);\r
 703             this.el = null;\r
 704         }\r
 705         this.purgeListeners();\r
 706     },\r
 707 \r
 708     syncHandleHeight : function(){\r
 709         var h = this.el.getHeight(true);\r
 710         if(this.west){\r
 711             this.west.el.setHeight(h);\r
 712         }\r
 713         if(this.east){\r
 714             this.east.el.setHeight(h);\r
 715         }\r
 716     }\r
 717 });\r
 718 \r
 719 // private\r
 720 // hash to map config positions to true positions\r
 721 Ext.Resizable.positions = {\r
 722     n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'\r
 723 };\r
 724 \r
 725 Ext.Resizable.Handle = Ext.extend(Object, {\r
 726     constructor : function(rz, pos, disableTrackOver, transparent, cls){\r
 727        if(!this.tpl){\r
 728             // only initialize the template if resizable is used\r
 729             var tpl = Ext.DomHelper.createTemplate(\r
 730                 {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}\r
 731             );\r
 732             tpl.compile();\r
 733             Ext.Resizable.Handle.prototype.tpl = tpl;\r
 734         }\r
 735         this.position = pos;\r
 736         this.rz = rz;\r
 737         this.el = this.tpl.append(rz.el.dom, [this.position], true);\r
 738         this.el.unselectable();\r
 739         if(transparent){\r
 740             this.el.setOpacity(0);\r
 741         }\r
 742         if(!Ext.isEmpty(cls)){\r
 743             this.el.addClass(cls);    \r
 744         }\r
 745         this.el.on('mousedown', this.onMouseDown, this);\r
 746         if(!disableTrackOver){\r
 747             this.el.on({\r
 748                 scope: this,\r
 749                 mouseover: this.onMouseOver,\r
 750                 mouseout: this.onMouseOut\r
 751             });\r
 752         }        \r
 753     },\r
 754     \r
 755     // private\r
 756     afterResize : function(rz){\r
 757         // do nothing    \r
 758     },\r
 759     // private\r
 760     onMouseDown : function(e){\r
 761         this.rz.onMouseDown(this, e);\r
 762     },\r
 763     // private\r
 764     onMouseOver : function(e){\r
 765         this.rz.handleOver(this, e);\r
 766     },\r
 767     // private\r
 768     onMouseOut : function(e){\r
 769         this.rz.handleOut(this, e);\r
 770     },\r
 771     // private\r
 772     destroy : function(){\r
 773         Ext.destroy(this.el);\r
 774         this.el = null;\r
 775     }\r
 776 });\r