3 <title>The source code</title>
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 <body onload="prettyPrint();">
8 <pre class="prettyprint lang-js">/*!
10 * Copyright(c) 2006-2009 Ext JS, LLC
12 * http://www.extjs.com/license
14 <div id="cls-Ext.Resizable"></div>/**
\r
15 * @class Ext.Resizable
\r
16 * @extends Ext.util.Observable
\r
17 * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
\r
18 * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
\r
19 * the textarea in a div and set 'resizeChild' to true (or to the id of the element), <b>or</b> set wrap:true in your config and
\r
20 * the element will be wrapped for you automatically.</p>
\r
21 * <p>Here is the list of valid resize handles:</p>
\r
24 ------ -------------------
\r
35 * <p>Here's an example showing the creation of a typical Resizable:</p>
\r
37 var resizer = new Ext.Resizable('element-id', {
\r
45 resizer.on('resize', myHandler);
\r
47 * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
\r
48 * resizer.east.setDisplayed(false);</p>
\r
50 * Create a new resizable component
\r
51 * @param {Mixed} el The id or element to resize
\r
52 * @param {Object} config configuration options
\r
54 Ext.Resizable = function(el, config){
\r
55 this.el = Ext.get(el);
\r
57 if(config && config.wrap){
\r
58 config.resizeChild = this.el;
\r
59 this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});
\r
60 this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
\r
61 this.el.setStyle('overflow', 'hidden');
\r
62 this.el.setPositioning(config.resizeChild.getPositioning());
\r
63 config.resizeChild.clearPositioning();
\r
64 if(!config.width || !config.height){
\r
65 var csize = config.resizeChild.getSize();
\r
66 this.el.setSize(csize.width, csize.height);
\r
68 if(config.pinned && !config.adjustments){
\r
69 config.adjustments = 'auto';
\r
73 <div id="prop-Ext.Resizable-proxy"></div>/**
\r
74 * The proxy Element that is resized in place of the real Element during the resize operation.
\r
75 * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.
\r
77 * @type Ext.Element.
\r
80 this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());
\r
81 this.proxy.unselectable();
\r
82 this.proxy.enableDisplayMode('block');
\r
84 Ext.apply(this, config);
\r
87 this.disableTrackOver = true;
\r
88 this.el.addClass('x-resizable-pinned');
\r
90 // if the element isn't positioned, make it relative
\r
91 var position = this.el.getStyle('position');
\r
92 if(position != 'absolute' && position != 'fixed'){
\r
93 this.el.setStyle('position', 'relative');
\r
95 if(!this.handles){ // no handles passed, must be legacy style
\r
96 this.handles = 's,e,se';
\r
97 if(this.multiDirectional){
\r
98 this.handles += ',n,w';
\r
101 if(this.handles == 'all'){
\r
102 this.handles = 'n s e w ne nw se sw';
\r
104 var hs = this.handles.split(/\s*?[,;]\s*?| /);
\r
105 var ps = Ext.Resizable.positions;
\r
106 for(var i = 0, len = hs.length; i < len; i++){
\r
107 if(hs[i] && ps[hs[i]]){
\r
108 var pos = ps[hs[i]];
\r
109 this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);
\r
113 this.corner = this.southeast;
\r
115 if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){
\r
116 this.updateBox = true;
\r
119 this.activeHandle = null;
\r
121 if(this.resizeChild){
\r
122 if(typeof this.resizeChild == 'boolean'){
\r
123 this.resizeChild = Ext.get(this.el.dom.firstChild, true);
\r
125 this.resizeChild = Ext.get(this.resizeChild, true);
\r
129 if(this.adjustments == 'auto'){
\r
130 var rc = this.resizeChild;
\r
131 var hw = this.west, he = this.east, hn = this.north, hs = this.south;
\r
132 if(rc && (hw || hn)){
\r
133 rc.position('relative');
\r
134 rc.setLeft(hw ? hw.el.getWidth() : 0);
\r
135 rc.setTop(hn ? hn.el.getHeight() : 0);
\r
137 this.adjustments = [
\r
138 (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
\r
139 (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
\r
143 if(this.draggable){
\r
144 this.dd = this.dynamic ?
\r
145 this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
\r
146 this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
\r
150 <div id="event-Ext.Resizable-beforeresize"></div>/**
\r
151 * @event beforeresize
\r
152 * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
\r
153 * @param {Ext.Resizable} this
\r
154 * @param {Ext.EventObject} e The mousedown event
\r
157 <div id="event-Ext.Resizable-resize"></div>/**
\r
159 * Fired after a resize.
\r
160 * @param {Ext.Resizable} this
\r
161 * @param {Number} width The new width
\r
162 * @param {Number} height The new height
\r
163 * @param {Ext.EventObject} e The mouseup event
\r
168 if(this.width !== null && this.height !== null){
\r
169 this.resizeTo(this.width, this.height);
\r
171 this.updateChildSize();
\r
174 this.el.dom.style.zoom = 1;
\r
176 Ext.Resizable.superclass.constructor.call(this);
\r
179 Ext.extend(Ext.Resizable, Ext.util.Observable, {
\r
181 <div id="cfg-Ext.Resizable-adjustments"></div>/**
\r
182 * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the
\r
183 * resize operation's new size (defaults to <tt>[0, 0]</tt>)
\r
185 adjustments : [0, 0],
\r
186 <div id="cfg-Ext.Resizable-animate"></div>/**
\r
187 * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
\r
190 <div id="cfg-Ext.Resizable-constrainTo"></div>/**
\r
191 * @cfg {Mixed} constrainTo Constrain the resize to a particular element
\r
193 <div id="cfg-Ext.Resizable-disableTrackOver"></div>/**
\r
194 * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
\r
196 disableTrackOver : false,
\r
197 <div id="cfg-Ext.Resizable-draggable"></div>/**
\r
198 * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
\r
201 <div id="cfg-Ext.Resizable-duration"></div>/**
\r
202 * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
\r
205 <div id="cfg-Ext.Resizable-dynamic"></div>/**
\r
206 * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
\r
209 <div id="cfg-Ext.Resizable-easing"></div>/**
\r
210 * @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)
\r
212 easing : 'easeOutStrong',
\r
213 <div id="cfg-Ext.Resizable-enabled"></div>/**
\r
214 * @cfg {Boolean} enabled False to disable resizing (defaults to true)
\r
217 <div id="prop-Ext.Resizable-enabled"></div>/**
\r
218 * @property enabled Writable. False if resizing is disabled.
\r
221 <div id="cfg-Ext.Resizable-handles"></div>/**
\r
222 * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
\r
223 * Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.
\r
226 <div id="cfg-Ext.Resizable-multiDirectional"></div>/**
\r
227 * @cfg {Boolean} multiDirectional <b>Deprecated</b>. Deprecated style of adding multi-direction resize handles.
\r
229 multiDirectional : false,
\r
230 <div id="cfg-Ext.Resizable-height"></div>/**
\r
231 * @cfg {Number} height The height of the element in pixels (defaults to null)
\r
234 <div id="cfg-Ext.Resizable-width"></div>/**
\r
235 * @cfg {Number} width The width of the element in pixels (defaults to null)
\r
238 <div id="cfg-Ext.Resizable-heightIncrement"></div>/**
\r
239 * @cfg {Number} heightIncrement The increment to snap the height resize in pixels
\r
240 * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
\r
242 heightIncrement : 0,
\r
243 <div id="cfg-Ext.Resizable-widthIncrement"></div>/**
\r
244 * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
\r
245 * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
\r
247 widthIncrement : 0,
\r
248 <div id="cfg-Ext.Resizable-minHeight"></div>/**
\r
249 * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
\r
252 <div id="cfg-Ext.Resizable-minWidth"></div>/**
\r
253 * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
\r
256 <div id="cfg-Ext.Resizable-maxHeight"></div>/**
\r
257 * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
\r
260 <div id="cfg-Ext.Resizable-maxWidth"></div>/**
\r
261 * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
\r
264 <div id="cfg-Ext.Resizable-minX"></div>/**
\r
265 * @cfg {Number} minX The minimum x for the element (defaults to 0)
\r
268 <div id="cfg-Ext.Resizable-minY"></div>/**
\r
269 * @cfg {Number} minY The minimum x for the element (defaults to 0)
\r
272 <div id="cfg-Ext.Resizable-pinned"></div>/**
\r
273 * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
\r
274 * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
\r
277 <div id="cfg-Ext.Resizable-preserveRatio"></div>/**
\r
278 * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
\r
279 * and width during resize (defaults to false)
\r
281 preserveRatio : false,
\r
282 <div id="cfg-Ext.Resizable-resizeChild"></div>/**
\r
283 * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
\r
285 resizeChild : false,
\r
286 <div id="cfg-Ext.Resizable-transparent"></div>/**
\r
287 * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
\r
289 transparent: false,
\r
290 <div id="cfg-Ext.Resizable-resizeRegion"></div>/**
\r
291 * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
\r
293 <div id="cfg-Ext.Resizable-wrap"></div>/**
\r
294 * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
\r
295 * in favor of the handles config option (defaults to false)
\r
299 <div id="method-Ext.Resizable-resizeTo"></div>/**
\r
300 * Perform a manual resize and fires the 'resize' event.
\r
301 * @param {Number} width
\r
302 * @param {Number} height
\r
304 resizeTo : function(width, height){
\r
305 this.el.setSize(width, height);
\r
306 this.updateChildSize();
\r
307 this.fireEvent('resize', this, width, height, null);
\r
311 startSizing : function(e, handle){
\r
312 this.fireEvent('beforeresize', this, e);
\r
313 if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
\r
316 this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: ' '}, Ext.getBody());
\r
317 this.overlay.unselectable();
\r
318 this.overlay.enableDisplayMode('block');
\r
321 mousemove: this.onMouseMove,
\r
322 mouseup: this.onMouseUp
\r
325 this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));
\r
327 this.resizing = true;
\r
328 this.startBox = this.el.getBox();
\r
329 this.startPoint = e.getXY();
\r
330 this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
\r
331 (this.startBox.y + this.startBox.height) - this.startPoint[1]];
\r
333 this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
\r
334 this.overlay.show();
\r
336 if(this.constrainTo) {
\r
337 var ct = Ext.get(this.constrainTo);
\r
338 this.resizeRegion = ct.getRegion().adjust(
\r
339 ct.getFrameWidth('t'),
\r
340 ct.getFrameWidth('l'),
\r
341 -ct.getFrameWidth('b'),
\r
342 -ct.getFrameWidth('r')
\r
346 this.proxy.setStyle('visibility', 'hidden'); // workaround display none
\r
348 this.proxy.setBox(this.startBox);
\r
350 this.proxy.setStyle('visibility', 'visible');
\r
356 onMouseDown : function(handle, e){
\r
359 this.activeHandle = handle;
\r
360 this.startSizing(e, handle);
\r
365 onMouseUp : function(e){
\r
366 this.activeHandle = null;
\r
367 var size = this.resizeElement();
\r
368 this.resizing = false;
\r
370 this.overlay.hide();
\r
372 this.fireEvent('resize', this, size.width, size.height, e);
\r
376 updateChildSize : function(){
\r
377 if(this.resizeChild){
\r
379 var child = this.resizeChild;
\r
380 var adj = this.adjustments;
\r
381 if(el.dom.offsetWidth){
\r
382 var b = el.getSize(true);
\r
383 child.setSize(b.width+adj[0], b.height+adj[1]);
\r
385 // Second call here for IE
\r
386 // The first call enables instant resizing and
\r
387 // the second call corrects scroll bars if they
\r
390 setTimeout(function(){
\r
391 if(el.dom.offsetWidth){
\r
392 var b = el.getSize(true);
\r
393 child.setSize(b.width+adj[0], b.height+adj[1]);
\r
401 snap : function(value, inc, min){
\r
402 if(!inc || !value){
\r
405 var newValue = value;
\r
406 var m = value % inc;
\r
409 newValue = value + (inc-m);
\r
411 newValue = value - m;
\r
414 return Math.max(min, newValue);
\r
417 <div id="method-Ext.Resizable-resizeElement"></div>/**
\r
418 * <p>Performs resizing of the associated Element. This method is called internally by this
\r
419 * class, and should not be called by user code.</p>
\r
420 * <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI
\r
421 * component such as a Panel, this method may be overridden by specifying an implementation
\r
422 * as a config option to provide appropriate behaviour at the end of the resize operation on
\r
423 * mouseup, for example resizing the Panel, and relaying the Panel's content.</p>
\r
424 * <p>The new area to be resized to is available by examining the state of the {@link #proxy}
\r
425 * Element. Example:
\r
428 title: 'Resize me',
\r
431 renderTo: Ext.getBody(),
\r
437 render: function(p) {
\r
438 new Ext.Resizable(p.getEl(), {
\r
442 resizeElement: function() {
\r
443 var box = this.proxy.getBox();
\r
456 resizeElement : function(){
\r
457 var box = this.proxy.getBox();
\r
458 if(this.updateBox){
\r
459 this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
\r
461 this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
\r
463 this.updateChildSize();
\r
471 constrain : function(v, diff, m, mx){
\r
474 }else if(v - diff > mx){
\r
481 onMouseMove : function(e){
\r
482 if(this.enabled && this.activeHandle){
\r
483 try{// try catch so if something goes wrong the user doesn't get hung
\r
485 if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
\r
489 //var curXY = this.startPoint;
\r
490 var curSize = this.curSize || this.startBox,
\r
491 x = this.startBox.x, y = this.startBox.y,
\r
494 w = curSize.width,
\r
495 h = curSize.height,
\r
498 mw = this.minWidth,
\r
499 mh = this.minHeight,
\r
500 mxw = this.maxWidth,
\r
501 mxh = this.maxHeight,
\r
502 wi = this.widthIncrement,
\r
503 hi = this.heightIncrement,
\r
504 eventXY = e.getXY(),
\r
505 diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
\r
506 diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
\r
507 pos = this.activeHandle.position,
\r
514 w = Math.min(Math.max(mw, w), mxw);
\r
518 h = Math.min(Math.max(mh, h), mxh);
\r
523 w = Math.min(Math.max(mw, w), mxw);
\r
524 h = Math.min(Math.max(mh, h), mxh);
\r
527 diffY = this.constrain(h, diffY, mh, mxh);
\r
532 diffX = this.constrain(w, diffX, mw, mxw);
\r
538 w = Math.min(Math.max(mw, w), mxw);
\r
539 diffY = this.constrain(h, diffY, mh, mxh);
\r
544 diffX = this.constrain(w, diffX, mw, mxw);
\r
545 diffY = this.constrain(h, diffY, mh, mxh);
\r
552 diffX = this.constrain(w, diffX, mw, mxw);
\r
554 h = Math.min(Math.max(mh, h), mxh);
\r
560 var sw = this.snap(w, wi, mw);
\r
561 var sh = this.snap(h, hi, mh);
\r
562 if(sw != w || sh != h){
\r
585 if(this.preserveRatio){
\r
590 h = Math.min(Math.max(mh, h), mxh);
\r
595 w = Math.min(Math.max(mw, w), mxw);
\r
600 w = Math.min(Math.max(mw, w), mxw);
\r
606 w = Math.min(Math.max(mw, w), mxw);
\r
612 h = Math.min(Math.max(mh, h), mxh);
\r
620 h = Math.min(Math.max(mh, h), mxh);
\r
630 h = Math.min(Math.max(mh, h), mxh);
\r
638 this.proxy.setBounds(x, y, w, h);
\r
640 this.resizeElement();
\r
647 handleOver : function(){
\r
649 this.el.addClass('x-resizable-over');
\r
654 handleOut : function(){
\r
655 if(!this.resizing){
\r
656 this.el.removeClass('x-resizable-over');
\r
660 <div id="method-Ext.Resizable-getEl"></div>/**
\r
661 * Returns the element this component is bound to.
\r
662 * @return {Ext.Element}
\r
664 getEl : function(){
\r
668 <div id="method-Ext.Resizable-getResizeChild"></div>/**
\r
669 * Returns the resizeChild element (or null).
\r
670 * @return {Ext.Element}
\r
672 getResizeChild : function(){
\r
673 return this.resizeChild;
\r
676 <div id="method-Ext.Resizable-destroy"></div>/**
\r
677 * Destroys this resizable. If the element was wrapped and
\r
678 * removeEl is not true then the element remains.
\r
679 * @param {Boolean} removeEl (optional) true to remove the element from the DOM
\r
681 destroy : function(removeEl){
\r
682 Ext.destroy(this.dd, this.overlay, this.proxy);
\r
683 this.overlay = null;
\r
686 var ps = Ext.Resizable.positions;
\r
688 if(typeof ps[k] != 'function' && this[ps[k]]){
\r
689 this[ps[k]].destroy();
\r
693 this.el.update('');
\r
694 Ext.destroy(this.el);
\r
697 this.purgeListeners();
\r
700 syncHandleHeight : function(){
\r
701 var h = this.el.getHeight(true);
\r
703 this.west.el.setHeight(h);
\r
706 this.east.el.setHeight(h);
\r
712 // hash to map config positions to true positions
\r
713 Ext.Resizable.positions = {
\r
714 n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
\r
718 Ext.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
\r
720 // only initialize the template if resizable is used
\r
721 var tpl = Ext.DomHelper.createTemplate(
\r
722 {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}
\r
725 Ext.Resizable.Handle.prototype.tpl = tpl;
\r
727 this.position = pos;
\r
729 this.el = this.tpl.append(rz.el.dom, [this.position], true);
\r
730 this.el.unselectable();
\r
732 this.el.setOpacity(0);
\r
734 this.el.on('mousedown', this.onMouseDown, this);
\r
735 if(!disableTrackOver){
\r
738 mouseover: this.onMouseOver,
\r
739 mouseout: this.onMouseOut
\r
745 Ext.Resizable.Handle.prototype = {
\r
747 afterResize : function(rz){
\r
751 onMouseDown : function(e){
\r
752 this.rz.onMouseDown(this, e);
\r
755 onMouseOver : function(e){
\r
756 this.rz.handleOver(this, e);
\r
759 onMouseOut : function(e){
\r
760 this.rz.handleOut(this, e);
\r
763 destroy : function(){
\r
764 Ext.destroy(this.el);
\r