3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
9 * @extends Ext.util.Observable
10 * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
11 * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
12 * 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
13 * the element will be wrapped for you automatically.</p>
14 * <p>Here is the list of valid resize handles:</p>
17 ------ -------------------
28 * <p>Here's an example showing the creation of a typical Resizable:</p>
30 var resizer = new Ext.Resizable('element-id', {
38 resizer.on('resize', myHandler);
40 * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
41 * resizer.east.setDisplayed(false);</p>
43 * Create a new resizable component
44 * @param {Mixed} el The id or element to resize
45 * @param {Object} config configuration options
47 Ext.Resizable = Ext.extend(Ext.util.Observable, {
49 constructor: function(el, config){
50 this.el = Ext.get(el);
51 if(config && config.wrap){
52 config.resizeChild = this.el;
53 this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});
54 this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
55 this.el.setStyle('overflow', 'hidden');
56 this.el.setPositioning(config.resizeChild.getPositioning());
57 config.resizeChild.clearPositioning();
58 if(!config.width || !config.height){
59 var csize = config.resizeChild.getSize();
60 this.el.setSize(csize.width, csize.height);
62 if(config.pinned && !config.adjustments){
63 config.adjustments = 'auto';
68 * The proxy Element that is resized in place of the real Element during the resize operation.
69 * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.
74 this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());
75 this.proxy.unselectable();
76 this.proxy.enableDisplayMode('block');
78 Ext.apply(this, config);
81 this.disableTrackOver = true;
82 this.el.addClass('x-resizable-pinned');
84 // if the element isn't positioned, make it relative
85 var position = this.el.getStyle('position');
86 if(position != 'absolute' && position != 'fixed'){
87 this.el.setStyle('position', 'relative');
89 if(!this.handles){ // no handles passed, must be legacy style
90 this.handles = 's,e,se';
91 if(this.multiDirectional){
92 this.handles += ',n,w';
95 if(this.handles == 'all'){
96 this.handles = 'n s e w ne nw se sw';
98 var hs = this.handles.split(/\s*?[,;]\s*?| /);
99 var ps = Ext.Resizable.positions;
100 for(var i = 0, len = hs.length; i < len; i++){
101 if(hs[i] && ps[hs[i]]){
103 this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent, this.handleCls);
107 this.corner = this.southeast;
109 if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){
110 this.updateBox = true;
113 this.activeHandle = null;
115 if(this.resizeChild){
116 if(typeof this.resizeChild == 'boolean'){
117 this.resizeChild = Ext.get(this.el.dom.firstChild, true);
119 this.resizeChild = Ext.get(this.resizeChild, true);
123 if(this.adjustments == 'auto'){
124 var rc = this.resizeChild;
125 var hw = this.west, he = this.east, hn = this.north, hs = this.south;
126 if(rc && (hw || hn)){
127 rc.position('relative');
128 rc.setLeft(hw ? hw.el.getWidth() : 0);
129 rc.setTop(hn ? hn.el.getHeight() : 0);
132 (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
133 (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
138 this.dd = this.dynamic ?
139 this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
140 this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
141 if(this.constrainTo){
142 this.dd.constrainTo(this.constrainTo);
148 * @event beforeresize
149 * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
150 * @param {Ext.Resizable} this
151 * @param {Ext.EventObject} e The mousedown event
156 * Fired after a resize.
157 * @param {Ext.Resizable} this
158 * @param {Number} width The new width
159 * @param {Number} height The new height
160 * @param {Ext.EventObject} e The mouseup event
165 if(this.width !== null && this.height !== null){
166 this.resizeTo(this.width, this.height);
168 this.updateChildSize();
171 this.el.dom.style.zoom = 1;
173 Ext.Resizable.superclass.constructor.call(this);
177 * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the
178 * resize operation's new size (defaults to <tt>[0, 0]</tt>)
180 adjustments : [0, 0],
182 * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
186 * @cfg {Mixed} constrainTo Constrain the resize to a particular element
189 * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
191 disableTrackOver : false,
193 * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
197 * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
201 * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
205 * @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)
207 easing : 'easeOutStrong',
209 * @cfg {Boolean} enabled False to disable resizing (defaults to true)
213 * @property enabled Writable. False if resizing is disabled.
217 * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
218 * Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.
222 * @cfg {Boolean} multiDirectional <b>Deprecated</b>. Deprecated style of adding multi-direction resize handles.
224 multiDirectional : false,
226 * @cfg {Number} height The height of the element in pixels (defaults to null)
230 * @cfg {Number} width The width of the element in pixels (defaults to null)
234 * @cfg {Number} heightIncrement The increment to snap the height resize in pixels
235 * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
239 * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
240 * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
244 * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
248 * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
252 * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
256 * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
260 * @cfg {Number} minX The minimum x for the element (defaults to 0)
264 * @cfg {Number} minY The minimum x for the element (defaults to 0)
268 * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
269 * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
273 * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
274 * and width during resize (defaults to false)
276 preserveRatio : false,
278 * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
282 * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
286 * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
289 * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
290 * in favor of the handles config option (defaults to false)
293 * @cfg {String} handleCls A css class to add to each handle. Defaults to <tt>''</tt>.
298 * Perform a manual resize and fires the 'resize' event.
299 * @param {Number} width
300 * @param {Number} height
302 resizeTo : function(width, height){
303 this.el.setSize(width, height);
304 this.updateChildSize();
305 this.fireEvent('resize', this, width, height, null);
309 startSizing : function(e, handle){
310 this.fireEvent('beforeresize', this, e);
311 if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
314 this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: ' '}, Ext.getBody());
315 this.overlay.unselectable();
316 this.overlay.enableDisplayMode('block');
319 mousemove: this.onMouseMove,
320 mouseup: this.onMouseUp
323 this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));
325 this.resizing = true;
326 this.startBox = this.el.getBox();
327 this.startPoint = e.getXY();
328 this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
329 (this.startBox.y + this.startBox.height) - this.startPoint[1]];
331 this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
334 if(this.constrainTo) {
335 var ct = Ext.get(this.constrainTo);
336 this.resizeRegion = ct.getRegion().adjust(
337 ct.getFrameWidth('t'),
338 ct.getFrameWidth('l'),
339 -ct.getFrameWidth('b'),
340 -ct.getFrameWidth('r')
344 this.proxy.setStyle('visibility', 'hidden'); // workaround display none
346 this.proxy.setBox(this.startBox);
348 this.proxy.setStyle('visibility', 'visible');
354 onMouseDown : function(handle, e){
357 this.activeHandle = handle;
358 this.startSizing(e, handle);
363 onMouseUp : function(e){
364 this.activeHandle = null;
365 var size = this.resizeElement();
366 this.resizing = false;
370 this.fireEvent('resize', this, size.width, size.height, e);
374 updateChildSize : function(){
375 if(this.resizeChild){
377 var child = this.resizeChild;
378 var adj = this.adjustments;
379 if(el.dom.offsetWidth){
380 var b = el.getSize(true);
381 child.setSize(b.width+adj[0], b.height+adj[1]);
383 // Second call here for IE
384 // The first call enables instant resizing and
385 // the second call corrects scroll bars if they
388 setTimeout(function(){
389 if(el.dom.offsetWidth){
390 var b = el.getSize(true);
391 child.setSize(b.width+adj[0], b.height+adj[1]);
399 snap : function(value, inc, min){
403 var newValue = value;
407 newValue = value + (inc-m);
409 newValue = value - m;
412 return Math.max(min, newValue);
416 * <p>Performs resizing of the associated Element. This method is called internally by this
417 * class, and should not be called by user code.</p>
418 * <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI
419 * component such as a Panel, this method may be overridden by specifying an implementation
420 * as a config option to provide appropriate behaviour at the end of the resize operation on
421 * mouseup, for example resizing the Panel, and relaying the Panel's content.</p>
422 * <p>The new area to be resized to is available by examining the state of the {@link #proxy}
429 renderTo: Ext.getBody(),
435 render: function(p) {
436 new Ext.Resizable(p.getEl(), {
440 resizeElement: function() {
441 var box = this.proxy.getBox();
454 resizeElement : function(){
455 var box = this.proxy.getBox();
457 this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
459 this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
461 this.updateChildSize();
465 if(this.draggable && this.constrainTo){
466 this.dd.resetConstraints();
467 this.dd.constrainTo(this.constrainTo);
473 constrain : function(v, diff, m, mx){
476 }else if(v - diff > mx){
483 onMouseMove : function(e){
484 if(this.enabled && this.activeHandle){
485 try{// try catch so if something goes wrong the user doesn't get hung
487 if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
491 //var curXY = this.startPoint;
492 var curSize = this.curSize || this.startBox,
493 x = this.startBox.x, y = this.startBox.y,
503 mxh = this.maxHeight,
504 wi = this.widthIncrement,
505 hi = this.heightIncrement,
507 diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
508 diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
509 pos = this.activeHandle.position,
516 w = Math.min(Math.max(mw, w), mxw);
520 h = Math.min(Math.max(mh, h), mxh);
525 w = Math.min(Math.max(mw, w), mxw);
526 h = Math.min(Math.max(mh, h), mxh);
529 diffY = this.constrain(h, diffY, mh, mxh);
534 diffX = this.constrain(w, diffX, mw, mxw);
540 w = Math.min(Math.max(mw, w), mxw);
541 diffY = this.constrain(h, diffY, mh, mxh);
546 diffX = this.constrain(w, diffX, mw, mxw);
547 diffY = this.constrain(h, diffY, mh, mxh);
554 diffX = this.constrain(w, diffX, mw, mxw);
556 h = Math.min(Math.max(mh, h), mxh);
562 var sw = this.snap(w, wi, mw);
563 var sh = this.snap(h, hi, mh);
564 if(sw != w || sh != h){
587 if(this.preserveRatio){
592 h = Math.min(Math.max(mh, h), mxh);
597 w = Math.min(Math.max(mw, w), mxw);
602 w = Math.min(Math.max(mw, w), mxw);
608 w = Math.min(Math.max(mw, w), mxw);
614 h = Math.min(Math.max(mh, h), mxh);
622 h = Math.min(Math.max(mh, h), mxh);
632 h = Math.min(Math.max(mh, h), mxh);
640 this.proxy.setBounds(x, y, w, h);
642 this.resizeElement();
649 handleOver : function(){
651 this.el.addClass('x-resizable-over');
656 handleOut : function(){
658 this.el.removeClass('x-resizable-over');
663 * Returns the element this component is bound to.
664 * @return {Ext.Element}
671 * Returns the resizeChild element (or null).
672 * @return {Ext.Element}
674 getResizeChild : function(){
675 return this.resizeChild;
679 * Destroys this resizable. If the element was wrapped and
680 * removeEl is not true then the element remains.
681 * @param {Boolean} removeEl (optional) true to remove the element from the DOM
683 destroy : function(removeEl){
684 Ext.destroy(this.dd, this.overlay, this.proxy);
688 var ps = Ext.Resizable.positions;
690 if(typeof ps[k] != 'function' && this[ps[k]]){
691 this[ps[k]].destroy();
696 Ext.destroy(this.el);
699 this.purgeListeners();
702 syncHandleHeight : function(){
703 var h = this.el.getHeight(true);
705 this.west.el.setHeight(h);
708 this.east.el.setHeight(h);
714 // hash to map config positions to true positions
715 Ext.Resizable.positions = {
716 n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
719 Ext.Resizable.Handle = Ext.extend(Object, {
720 constructor : function(rz, pos, disableTrackOver, transparent, cls){
722 // only initialize the template if resizable is used
723 var tpl = Ext.DomHelper.createTemplate(
724 {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}
727 Ext.Resizable.Handle.prototype.tpl = tpl;
731 this.el = this.tpl.append(rz.el.dom, [this.position], true);
732 this.el.unselectable();
734 this.el.setOpacity(0);
736 if(!Ext.isEmpty(cls)){
737 this.el.addClass(cls);
739 this.el.on('mousedown', this.onMouseDown, this);
740 if(!disableTrackOver){
743 mouseover: this.onMouseOver,
744 mouseout: this.onMouseOut
750 afterResize : function(rz){
754 onMouseDown : function(e){
755 this.rz.onMouseDown(this, e);
758 onMouseOver : function(e){
759 this.rz.handleOver(this, e);
762 onMouseOut : function(e){
763 this.rz.handleOut(this, e);
766 destroy : function(){
767 Ext.destroy(this.el);