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