docs/source/Resizable.html

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