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