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