source/widgets/Resizable.js

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