-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js"><div id="cls-Ext.Resizable"></div>/**\r
- * @class Ext.Resizable\r
- * @extends Ext.util.Observable\r
- * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element \r
- * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap\r
- * 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
- * the element will be wrapped for you automatically.</p>\r
- * <p>Here is the list of valid resize handles:</p>\r
- * <pre>\r
-Value Description\r
------- -------------------\r
- 'n' north\r
- 's' south\r
- 'e' east\r
- 'w' west\r
- 'nw' northwest\r
- 'sw' southwest\r
- 'se' southeast\r
- 'ne' northeast\r
- 'all' all\r
-</pre>\r
- * <p>Here's an example showing the creation of a typical Resizable:</p>\r
- * <pre><code>\r
-var resizer = new Ext.Resizable('element-id', {\r
- handles: 'all',\r
- minWidth: 200,\r
- minHeight: 100,\r
- maxWidth: 500,\r
- maxHeight: 400,\r
- pinned: true\r
-});\r
-resizer.on('resize', myHandler);\r
-</code></pre>\r
- * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>\r
- * resizer.east.setDisplayed(false);</p>\r
- * @constructor\r
- * Create a new resizable component\r
- * @param {Mixed} el The id or element to resize\r
- * @param {Object} config configuration options\r
- */\r
-Ext.Resizable = function(el, config){\r
- this.el = Ext.get(el);\r
- \r
- if(config && config.wrap){\r
- config.resizeChild = this.el;\r
- this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});\r
- this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';\r
- this.el.setStyle('overflow', 'hidden');\r
- this.el.setPositioning(config.resizeChild.getPositioning());\r
- config.resizeChild.clearPositioning();\r
- if(!config.width || !config.height){\r
- var csize = config.resizeChild.getSize();\r
- this.el.setSize(csize.width, csize.height);\r
- }\r
- if(config.pinned && !config.adjustments){\r
- config.adjustments = 'auto';\r
- }\r
- }\r
-\r
- <div id="prop-Ext.Resizable-proxy"></div>/**\r
- * The proxy Element that is resized in place of the real Element during the resize operation.\r
- * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.\r
- * Read only.\r
- * @type Ext.Element.\r
- * @property proxy\r
- */\r
- this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());\r
- this.proxy.unselectable();\r
- this.proxy.enableDisplayMode('block');\r
-\r
- Ext.apply(this, config);\r
- \r
- if(this.pinned){\r
- this.disableTrackOver = true;\r
- this.el.addClass('x-resizable-pinned');\r
- }\r
- // if the element isn't positioned, make it relative\r
- var position = this.el.getStyle('position');\r
- if(position != 'absolute' && position != 'fixed'){\r
- this.el.setStyle('position', 'relative');\r
- }\r
- if(!this.handles){ // no handles passed, must be legacy style\r
- this.handles = 's,e,se';\r
- if(this.multiDirectional){\r
- this.handles += ',n,w';\r
- }\r
- }\r
- if(this.handles == 'all'){\r
- this.handles = 'n s e w ne nw se sw';\r
- }\r
- var hs = this.handles.split(/\s*?[,;]\s*?| /);\r
- var ps = Ext.Resizable.positions;\r
- for(var i = 0, len = hs.length; i < len; i++){\r
- if(hs[i] && ps[hs[i]]){\r
- var pos = ps[hs[i]];\r
- this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent);\r
- }\r
- }\r
- // legacy\r
- this.corner = this.southeast;\r
- \r
- if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){\r
- this.updateBox = true;\r
- } \r
- \r
- this.activeHandle = null;\r
- \r
- if(this.resizeChild){\r
- if(typeof this.resizeChild == 'boolean'){\r
- this.resizeChild = Ext.get(this.el.dom.firstChild, true);\r
- }else{\r
- this.resizeChild = Ext.get(this.resizeChild, true);\r
- }\r
- }\r
- \r
- if(this.adjustments == 'auto'){\r
- var rc = this.resizeChild;\r
- var hw = this.west, he = this.east, hn = this.north, hs = this.south;\r
- if(rc && (hw || hn)){\r
- rc.position('relative');\r
- rc.setLeft(hw ? hw.el.getWidth() : 0);\r
- rc.setTop(hn ? hn.el.getHeight() : 0);\r
- }\r
- this.adjustments = [\r
- (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),\r
- (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1 \r
- ];\r
- }\r
- \r
- if(this.draggable){\r
- this.dd = this.dynamic ? \r
- this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});\r
- this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);\r
- }\r
- \r
- this.addEvents(\r
- <div id="event-Ext.Resizable-beforeresize"></div>/**\r
- * @event beforeresize\r
- * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.\r
- * @param {Ext.Resizable} this\r
- * @param {Ext.EventObject} e The mousedown event\r
- */\r
- 'beforeresize',\r
- <div id="event-Ext.Resizable-resize"></div>/**\r
- * @event resize\r
- * Fired after a resize.\r
- * @param {Ext.Resizable} this\r
- * @param {Number} width The new width\r
- * @param {Number} height The new height\r
- * @param {Ext.EventObject} e The mouseup event\r
- */\r
- 'resize'\r
- );\r
- \r
- if(this.width !== null && this.height !== null){\r
- this.resizeTo(this.width, this.height);\r
- }else{\r
- this.updateChildSize();\r
- }\r
- if(Ext.isIE){\r
- this.el.dom.style.zoom = 1;\r
- }\r
- Ext.Resizable.superclass.constructor.call(this);\r
-};\r
-\r
-Ext.extend(Ext.Resizable, Ext.util.Observable, {\r
-\r
- <div id="cfg-Ext.Resizable-adjustments"></div>/**\r
- * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the\r
- * resize operation's new size (defaults to <tt>[0, 0]</tt>)\r
- */\r
- adjustments : [0, 0],\r
- <div id="cfg-Ext.Resizable-animate"></div>/**\r
- * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)\r
- */\r
- animate : false,\r
- <div id="cfg-Ext.Resizable-constrainTo"></div>/**\r
- * @cfg {Mixed} constrainTo Constrain the resize to a particular element\r
- */\r
- <div id="cfg-Ext.Resizable-disableTrackOver"></div>/**\r
- * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)\r
- */\r
- disableTrackOver : false,\r
- <div id="cfg-Ext.Resizable-draggable"></div>/**\r
- * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)\r
- */\r
- draggable: false,\r
- <div id="cfg-Ext.Resizable-duration"></div>/**\r
- * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)\r
- */\r
- duration : 0.35,\r
- <div id="cfg-Ext.Resizable-dynamic"></div>/**\r
- * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)\r
- */\r
- dynamic : false,\r
- <div id="cfg-Ext.Resizable-easing"></div>/**\r
- * @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)\r
- */\r
- easing : 'easeOutStrong',\r
- <div id="cfg-Ext.Resizable-enabled"></div>/**\r
- * @cfg {Boolean} enabled False to disable resizing (defaults to true)\r
- */\r
- enabled : true,\r
- <div id="prop-Ext.Resizable-enabled"></div>/**\r
- * @property enabled Writable. False if resizing is disabled.\r
- * @type Boolean \r
- */\r
- <div id="cfg-Ext.Resizable-handles"></div>/**\r
- * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).\r
- * Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.\r
- */\r
- handles : false,\r
- <div id="cfg-Ext.Resizable-multiDirectional"></div>/**\r
- * @cfg {Boolean} multiDirectional <b>Deprecated</b>. Deprecated style of adding multi-direction resize handles.\r
- */\r
- multiDirectional : false,\r
- <div id="cfg-Ext.Resizable-height"></div>/**\r
- * @cfg {Number} height The height of the element in pixels (defaults to null)\r
- */\r
- height : null,\r
- <div id="cfg-Ext.Resizable-width"></div>/**\r
- * @cfg {Number} width The width of the element in pixels (defaults to null)\r
- */\r
- width : null,\r
- <div id="cfg-Ext.Resizable-heightIncrement"></div>/**\r
- * @cfg {Number} heightIncrement The increment to snap the height resize in pixels\r
- * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.\r
- */\r
- heightIncrement : 0,\r
- <div id="cfg-Ext.Resizable-widthIncrement"></div>/**\r
- * @cfg {Number} widthIncrement The increment to snap the width resize in pixels\r
- * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.\r
- */\r
- widthIncrement : 0,\r
- <div id="cfg-Ext.Resizable-minHeight"></div>/**\r
- * @cfg {Number} minHeight The minimum height for the element (defaults to 5)\r
- */\r
- minHeight : 5,\r
- <div id="cfg-Ext.Resizable-minWidth"></div>/**\r
- * @cfg {Number} minWidth The minimum width for the element (defaults to 5)\r
- */\r
- minWidth : 5,\r
- <div id="cfg-Ext.Resizable-maxHeight"></div>/**\r
- * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)\r
- */\r
- maxHeight : 10000,\r
- <div id="cfg-Ext.Resizable-maxWidth"></div>/**\r
- * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)\r
- */\r
- maxWidth : 10000,\r
- <div id="cfg-Ext.Resizable-minX"></div>/**\r
- * @cfg {Number} minX The minimum x for the element (defaults to 0)\r
- */\r
- minX: 0,\r
- <div id="cfg-Ext.Resizable-minY"></div>/**\r
- * @cfg {Number} minY The minimum x for the element (defaults to 0)\r
- */\r
- minY: 0,\r
- <div id="cfg-Ext.Resizable-pinned"></div>/**\r
- * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the\r
- * user mouses over the resizable borders. This is only applied at config time. (defaults to false)\r
- */\r
- pinned : false,\r
- <div id="cfg-Ext.Resizable-preserveRatio"></div>/**\r
- * @cfg {Boolean} preserveRatio True to preserve the original ratio between height\r
- * and width during resize (defaults to false)\r
- */\r
- preserveRatio : false,\r
- <div id="cfg-Ext.Resizable-resizeChild"></div>/**\r
- * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false) \r
- */ \r
- resizeChild : false,\r
- <div id="cfg-Ext.Resizable-transparent"></div>/**\r
- * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)\r
- */\r
- transparent: false,\r
- <div id="cfg-Ext.Resizable-resizeRegion"></div>/**\r
- * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region\r
- */\r
- <div id="cfg-Ext.Resizable-wrap"></div>/**\r
- * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)\r
- * in favor of the handles config option (defaults to false)\r
- */\r
-\r
- \r
- <div id="method-Ext.Resizable-resizeTo"></div>/**\r
- * Perform a manual resize and fires the 'resize' event.\r
- * @param {Number} width\r
- * @param {Number} height\r
- */\r
- resizeTo : function(width, height){\r
- this.el.setSize(width, height);\r
- this.updateChildSize();\r
- this.fireEvent('resize', this, width, height, null);\r
- },\r
-\r
- // private\r
- startSizing : function(e, handle){\r
- this.fireEvent('beforeresize', this, e);\r
- if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler\r
-\r
- if(!this.overlay){\r
- this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: ' '}, Ext.getBody());\r
- this.overlay.unselectable();\r
- this.overlay.enableDisplayMode('block');\r
- this.overlay.on({\r
- scope: this,\r
- mousemove: this.onMouseMove,\r
- mouseup: this.onMouseUp\r
- });\r
- }\r
- this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));\r
-\r
- this.resizing = true;\r
- this.startBox = this.el.getBox();\r
- this.startPoint = e.getXY();\r
- this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],\r
- (this.startBox.y + this.startBox.height) - this.startPoint[1]];\r
-\r
- this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));\r
- this.overlay.show();\r
-\r
- if(this.constrainTo) {\r
- var ct = Ext.get(this.constrainTo);\r
- this.resizeRegion = ct.getRegion().adjust(\r
- ct.getFrameWidth('t'),\r
- ct.getFrameWidth('l'),\r
- -ct.getFrameWidth('b'),\r
- -ct.getFrameWidth('r')\r
- );\r
- }\r
-\r
- this.proxy.setStyle('visibility', 'hidden'); // workaround display none\r
- this.proxy.show();\r
- this.proxy.setBox(this.startBox);\r
- if(!this.dynamic){\r
- this.proxy.setStyle('visibility', 'visible');\r
- }\r
- }\r
- },\r
-\r
- // private\r
- onMouseDown : function(handle, e){\r
- if(this.enabled){\r
- e.stopEvent();\r
- this.activeHandle = handle;\r
- this.startSizing(e, handle);\r
- } \r
- },\r
-\r
- // private\r
- onMouseUp : function(e){\r
- this.activeHandle = null;\r
- var size = this.resizeElement();\r
- this.resizing = false;\r
- this.handleOut();\r
- this.overlay.hide();\r
- this.proxy.hide();\r
- this.fireEvent('resize', this, size.width, size.height, e);\r
- },\r
-\r
- // private\r
- updateChildSize : function(){\r
- if(this.resizeChild){\r
- var el = this.el;\r
- var child = this.resizeChild;\r
- var adj = this.adjustments;\r
- if(el.dom.offsetWidth){\r
- var b = el.getSize(true);\r
- child.setSize(b.width+adj[0], b.height+adj[1]);\r
- }\r
- // Second call here for IE\r
- // The first call enables instant resizing and\r
- // the second call corrects scroll bars if they\r
- // exist\r
- if(Ext.isIE){\r
- setTimeout(function(){\r
- if(el.dom.offsetWidth){\r
- var b = el.getSize(true);\r
- child.setSize(b.width+adj[0], b.height+adj[1]);\r
- }\r
- }, 10);\r
- }\r
- }\r
- },\r
-\r
- // private\r
- snap : function(value, inc, min){\r
- if(!inc || !value){\r
- return value;\r
- }\r
- var newValue = value;\r
- var m = value % inc;\r
- if(m > 0){\r
- if(m > (inc/2)){\r
- newValue = value + (inc-m);\r
- }else{\r
- newValue = value - m;\r
- }\r
- }\r
- return Math.max(min, newValue);\r
- },\r
-\r
- <div id="method-Ext.Resizable-resizeElement"></div>/**\r
- * <p>Performs resizing of the associated Element. This method is called internally by this\r
- * class, and should not be called by user code.</p>\r
- * <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI\r
- * component such as a Panel, this method may be overridden by specifying an implementation\r
- * as a config option to provide appropriate behaviour at the end of the resize operation on\r
- * mouseup, for example resizing the Panel, and relaying the Panel's content.</p>\r
- * <p>The new area to be resized to is available by examining the state of the {@link #proxy}\r
- * Element. Example:\r
-<pre><code>\r
-new Ext.Panel({\r
- title: 'Resize me',\r
- x: 100,\r
- y: 100,\r
- renderTo: Ext.getBody(),\r
- floating: true,\r
- frame: true,\r
- width: 400,\r
- height: 200,\r
- listeners: {\r
- render: function(p) {\r
- new Ext.Resizable(p.getEl(), {\r
- handles: 'all',\r
- pinned: true,\r
- transparent: true,\r
- resizeElement: function() {\r
- var box = this.proxy.getBox();\r
- p.updateBox(box);\r
- if (p.layout) {\r
- p.doLayout();\r
- }\r
- return box;\r
- }\r
- });\r
- }\r
- }\r
-}).show();\r
-</code></pre>\r
- */\r
- resizeElement : function(){\r
- var box = this.proxy.getBox();\r
- if(this.updateBox){\r
- this.el.setBox(box, false, this.animate, this.duration, null, this.easing);\r
- }else{\r
- this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);\r
- }\r
- this.updateChildSize();\r
- if(!this.dynamic){\r
- this.proxy.hide();\r
- }\r
- return box;\r
- },\r
-\r
- // private\r
- constrain : function(v, diff, m, mx){\r
- if(v - diff < m){\r
- diff = v - m; \r
- }else if(v - diff > mx){\r
- diff = v - mx; \r
- }\r
- return diff; \r
- },\r
-\r
- // private\r
- onMouseMove : function(e){\r
- if(this.enabled && this.activeHandle){\r
- try{// try catch so if something goes wrong the user doesn't get hung\r
-\r
- if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {\r
- return;\r
- }\r
-\r
- //var curXY = this.startPoint;\r
- var curSize = this.curSize || this.startBox,\r
- x = this.startBox.x, y = this.startBox.y,\r
- ox = x, \r
- oy = y,\r
- w = curSize.width, \r
- h = curSize.height,\r
- ow = w, \r
- oh = h,\r
- mw = this.minWidth, \r
- mh = this.minHeight,\r
- mxw = this.maxWidth, \r
- mxh = this.maxHeight,\r
- wi = this.widthIncrement,\r
- hi = this.heightIncrement,\r
- eventXY = e.getXY(),\r
- diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),\r
- diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),\r
- pos = this.activeHandle.position,\r
- tw,\r
- th;\r
- \r
- switch(pos){\r
- case 'east':\r
- w += diffX; \r
- w = Math.min(Math.max(mw, w), mxw);\r
- break;\r
- case 'south':\r
- h += diffY;\r
- h = Math.min(Math.max(mh, h), mxh);\r
- break;\r
- case 'southeast':\r
- w += diffX; \r
- h += diffY;\r
- w = Math.min(Math.max(mw, w), mxw);\r
- h = Math.min(Math.max(mh, h), mxh);\r
- break;\r
- case 'north':\r
- diffY = this.constrain(h, diffY, mh, mxh);\r
- y += diffY;\r
- h -= diffY;\r
- break;\r
- case 'west':\r
- diffX = this.constrain(w, diffX, mw, mxw);\r
- x += diffX;\r
- w -= diffX;\r
- break;\r
- case 'northeast':\r
- w += diffX; \r
- w = Math.min(Math.max(mw, w), mxw);\r
- diffY = this.constrain(h, diffY, mh, mxh);\r
- y += diffY;\r
- h -= diffY;\r
- break;\r
- case 'northwest':\r
- diffX = this.constrain(w, diffX, mw, mxw);\r
- diffY = this.constrain(h, diffY, mh, mxh);\r
- y += diffY;\r
- h -= diffY;\r
- x += diffX;\r
- w -= diffX;\r
- break;\r
- case 'southwest':\r
- diffX = this.constrain(w, diffX, mw, mxw);\r
- h += diffY;\r
- h = Math.min(Math.max(mh, h), mxh);\r
- x += diffX;\r
- w -= diffX;\r
- break;\r
- }\r
- \r
- var sw = this.snap(w, wi, mw);\r
- var sh = this.snap(h, hi, mh);\r
- if(sw != w || sh != h){\r
- switch(pos){\r
- case 'northeast':\r
- y -= sh - h;\r
- break;\r
- case 'north':\r
- y -= sh - h;\r
- break;\r
- case 'southwest':\r
- x -= sw - w;\r
- break;\r
- case 'west':\r
- x -= sw - w;\r
- break;\r
- case 'northwest':\r
- x -= sw - w;\r
- y -= sh - h;\r
- break;\r
- }\r
- w = sw;\r
- h = sh;\r
- }\r
- \r
- if(this.preserveRatio){\r
- switch(pos){\r
- case 'southeast':\r
- case 'east':\r
- h = oh * (w/ow);\r
- h = Math.min(Math.max(mh, h), mxh);\r
- w = ow * (h/oh);\r
- break;\r
- case 'south':\r
- w = ow * (h/oh);\r
- w = Math.min(Math.max(mw, w), mxw);\r
- h = oh * (w/ow);\r
- break;\r
- case 'northeast':\r
- w = ow * (h/oh);\r
- w = Math.min(Math.max(mw, w), mxw);\r
- h = oh * (w/ow);\r
- break;\r
- case 'north':\r
- tw = w;\r
- w = ow * (h/oh);\r
- w = Math.min(Math.max(mw, w), mxw);\r
- h = oh * (w/ow);\r
- x += (tw - w) / 2;\r
- break;\r
- case 'southwest':\r
- h = oh * (w/ow);\r
- h = Math.min(Math.max(mh, h), mxh);\r
- tw = w;\r
- w = ow * (h/oh);\r
- x += tw - w;\r
- break;\r
- case 'west':\r
- th = h;\r
- h = oh * (w/ow);\r
- h = Math.min(Math.max(mh, h), mxh);\r
- y += (th - h) / 2;\r
- tw = w;\r
- w = ow * (h/oh);\r
- x += tw - w;\r
- break;\r
- case 'northwest':\r
- tw = w;\r
- th = h;\r
- h = oh * (w/ow);\r
- h = Math.min(Math.max(mh, h), mxh);\r
- w = ow * (h/oh);\r
- y += th - h;\r
- x += tw - w;\r
- break;\r
- \r
- }\r
- }\r
- this.proxy.setBounds(x, y, w, h);\r
- if(this.dynamic){\r
- this.resizeElement();\r
- }\r
- }catch(ex){}\r
- }\r
- },\r
-\r
- // private\r
- handleOver : function(){\r
- if(this.enabled){\r
- this.el.addClass('x-resizable-over');\r
- }\r
- },\r
-\r
- // private\r
- handleOut : function(){\r
- if(!this.resizing){\r
- this.el.removeClass('x-resizable-over');\r
- }\r
- },\r
- \r
- <div id="method-Ext.Resizable-getEl"></div>/**\r
- * Returns the element this component is bound to.\r
- * @return {Ext.Element}\r
- */\r
- getEl : function(){\r
- return this.el;\r
- },\r
- \r
- <div id="method-Ext.Resizable-getResizeChild"></div>/**\r
- * Returns the resizeChild element (or null).\r
- * @return {Ext.Element}\r
- */\r
- getResizeChild : function(){\r
- return this.resizeChild;\r
- },\r
- \r
- <div id="method-Ext.Resizable-destroy"></div>/**\r
- * Destroys this resizable. If the element was wrapped and \r
- * removeEl is not true then the element remains.\r
- * @param {Boolean} removeEl (optional) true to remove the element from the DOM\r
- */\r
- destroy : function(removeEl){\r
- Ext.destroy(this.dd, this.overlay, this.proxy);\r
- this.overlay = null;\r
- this.proxy = null;\r
- \r
- var ps = Ext.Resizable.positions;\r
- for(var k in ps){\r
- if(typeof ps[k] != 'function' && this[ps[k]]){\r
- this[ps[k]].destroy();\r
- }\r
- }\r
- if(removeEl){\r
- this.el.update('');\r
- Ext.destroy(this.el);\r
- this.el = null;\r
- }\r
- this.purgeListeners();\r
- },\r
-\r
- syncHandleHeight : function(){\r
- var h = this.el.getHeight(true);\r
- if(this.west){\r
- this.west.el.setHeight(h);\r
- }\r
- if(this.east){\r
- this.east.el.setHeight(h);\r
- }\r
- }\r
-});\r
-\r
-// private\r
-// hash to map config positions to true positions\r
-Ext.Resizable.positions = {\r
- n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'\r
-};\r
-\r
-// private\r
-Ext.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){\r
- if(!this.tpl){\r
- // only initialize the template if resizable is used\r
- var tpl = Ext.DomHelper.createTemplate(\r
- {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}\r
- );\r
- tpl.compile();\r
- Ext.Resizable.Handle.prototype.tpl = tpl;\r
- }\r
- this.position = pos;\r
- this.rz = rz;\r
- this.el = this.tpl.append(rz.el.dom, [this.position], true);\r
- this.el.unselectable();\r
- if(transparent){\r
- this.el.setOpacity(0);\r
- }\r
- this.el.on('mousedown', this.onMouseDown, this);\r
- if(!disableTrackOver){\r
- this.el.on({\r
- scope: this,\r
- mouseover: this.onMouseOver,\r
- mouseout: this.onMouseOut\r
- });\r
- }\r
-};\r
-\r
-// private\r
-Ext.Resizable.Handle.prototype = {\r
- // private\r
- afterResize : function(rz){\r
- // do nothing \r
- },\r
- // private\r
- onMouseDown : function(e){\r
- this.rz.onMouseDown(this, e);\r
- },\r
- // private\r
- onMouseOver : function(e){\r
- this.rz.handleOver(this, e);\r
- },\r
- // private\r
- onMouseOut : function(e){\r
- this.rz.handleOut(this, e);\r
- },\r
- // private\r
- destroy : function(){\r
- Ext.destroy(this.el);\r
- this.el = null;\r
- }\r
-};\r
-</pre> \r
-</body>\r
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body onload="prettyPrint();">
+ <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.Resizable"></div>/**
+ * @class Ext.Resizable
+ * @extends Ext.util.Observable
+ * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
+ * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
+ * 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
+ * the element will be wrapped for you automatically.</p>
+ * <p>Here is the list of valid resize handles:</p>
+ * <pre>
+Value Description
+------ -------------------
+ 'n' north
+ 's' south
+ 'e' east
+ 'w' west
+ 'nw' northwest
+ 'sw' southwest
+ 'se' southeast
+ 'ne' northeast
+ 'all' all
+</pre>
+ * <p>Here's an example showing the creation of a typical Resizable:</p>
+ * <pre><code>
+var resizer = new Ext.Resizable('element-id', {
+ handles: 'all',
+ minWidth: 200,
+ minHeight: 100,
+ maxWidth: 500,
+ maxHeight: 400,
+ pinned: true
+});
+resizer.on('resize', myHandler);
+</code></pre>
+ * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
+ * resizer.east.setDisplayed(false);</p>
+ * @constructor
+ * Create a new resizable component
+ * @param {Mixed} el The id or element to resize
+ * @param {Object} config configuration options
+ */
+Ext.Resizable = Ext.extend(Ext.util.Observable, {
+
+ constructor: function(el, config){
+ this.el = Ext.get(el);
+ if(config && config.wrap){
+ config.resizeChild = this.el;
+ this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});
+ this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
+ this.el.setStyle('overflow', 'hidden');
+ this.el.setPositioning(config.resizeChild.getPositioning());
+ config.resizeChild.clearPositioning();
+ if(!config.width || !config.height){
+ var csize = config.resizeChild.getSize();
+ this.el.setSize(csize.width, csize.height);
+ }
+ if(config.pinned && !config.adjustments){
+ config.adjustments = 'auto';
+ }
+ }
+
+ <div id="prop-Ext.Resizable-proxy"></div>/**
+ * The proxy Element that is resized in place of the real Element during the resize operation.
+ * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.
+ * Read only.
+ * @type Ext.Element.
+ * @property proxy
+ */
+ this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());
+ this.proxy.unselectable();
+ this.proxy.enableDisplayMode('block');
+
+ Ext.apply(this, config);
+
+ if(this.pinned){
+ this.disableTrackOver = true;
+ this.el.addClass('x-resizable-pinned');
+ }
+ // if the element isn't positioned, make it relative
+ var position = this.el.getStyle('position');
+ if(position != 'absolute' && position != 'fixed'){
+ this.el.setStyle('position', 'relative');
+ }
+ if(!this.handles){ // no handles passed, must be legacy style
+ this.handles = 's,e,se';
+ if(this.multiDirectional){
+ this.handles += ',n,w';
+ }
+ }
+ if(this.handles == 'all'){
+ this.handles = 'n s e w ne nw se sw';
+ }
+ var hs = this.handles.split(/\s*?[,;]\s*?| /);
+ var ps = Ext.Resizable.positions;
+ for(var i = 0, len = hs.length; i < len; i++){
+ if(hs[i] && ps[hs[i]]){
+ var pos = ps[hs[i]];
+ this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent, this.handleCls);
+ }
+ }
+ // legacy
+ this.corner = this.southeast;
+
+ if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){
+ this.updateBox = true;
+ }
+
+ this.activeHandle = null;
+
+ if(this.resizeChild){
+ if(typeof this.resizeChild == 'boolean'){
+ this.resizeChild = Ext.get(this.el.dom.firstChild, true);
+ }else{
+ this.resizeChild = Ext.get(this.resizeChild, true);
+ }
+ }
+
+ if(this.adjustments == 'auto'){
+ var rc = this.resizeChild;
+ var hw = this.west, he = this.east, hn = this.north, hs = this.south;
+ if(rc && (hw || hn)){
+ rc.position('relative');
+ rc.setLeft(hw ? hw.el.getWidth() : 0);
+ rc.setTop(hn ? hn.el.getHeight() : 0);
+ }
+ this.adjustments = [
+ (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
+ (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
+ ];
+ }
+
+ if(this.draggable){
+ this.dd = this.dynamic ?
+ this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
+ this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
+ if(this.constrainTo){
+ this.dd.constrainTo(this.constrainTo);
+ }
+ }
+
+ this.addEvents(
+ <div id="event-Ext.Resizable-beforeresize"></div>/**
+ * @event beforeresize
+ * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
+ * @param {Ext.Resizable} this
+ * @param {Ext.EventObject} e The mousedown event
+ */
+ 'beforeresize',
+ <div id="event-Ext.Resizable-resize"></div>/**
+ * @event resize
+ * Fired after a resize.
+ * @param {Ext.Resizable} this
+ * @param {Number} width The new width
+ * @param {Number} height The new height
+ * @param {Ext.EventObject} e The mouseup event
+ */
+ 'resize'
+ );
+
+ if(this.width !== null && this.height !== null){
+ this.resizeTo(this.width, this.height);
+ }else{
+ this.updateChildSize();
+ }
+ if(Ext.isIE){
+ this.el.dom.style.zoom = 1;
+ }
+ Ext.Resizable.superclass.constructor.call(this);
+ },
+
+ <div id="cfg-Ext.Resizable-adjustments"></div>/**
+ * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the
+ * resize operation's new size (defaults to <tt>[0, 0]</tt>)
+ */
+ adjustments : [0, 0],
+ <div id="cfg-Ext.Resizable-animate"></div>/**
+ * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
+ */
+ animate : false,
+ <div id="cfg-Ext.Resizable-constrainTo"></div>/**
+ * @cfg {Mixed} constrainTo Constrain the resize to a particular element
+ */
+ <div id="cfg-Ext.Resizable-disableTrackOver"></div>/**
+ * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
+ */
+ disableTrackOver : false,
+ <div id="cfg-Ext.Resizable-draggable"></div>/**
+ * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
+ */
+ draggable: false,
+ <div id="cfg-Ext.Resizable-duration"></div>/**
+ * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
+ */
+ duration : 0.35,
+ <div id="cfg-Ext.Resizable-dynamic"></div>/**
+ * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
+ */
+ dynamic : false,
+ <div id="cfg-Ext.Resizable-easing"></div>/**
+ * @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)
+ */
+ easing : 'easeOutStrong',
+ <div id="cfg-Ext.Resizable-enabled"></div>/**
+ * @cfg {Boolean} enabled False to disable resizing (defaults to true)
+ */
+ enabled : true,
+ <div id="prop-Ext.Resizable-enabled"></div>/**
+ * @property enabled Writable. False if resizing is disabled.
+ * @type Boolean
+ */
+ <div id="cfg-Ext.Resizable-handles"></div>/**
+ * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
+ * Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.
+ */
+ handles : false,
+ <div id="cfg-Ext.Resizable-multiDirectional"></div>/**
+ * @cfg {Boolean} multiDirectional <b>Deprecated</b>. Deprecated style of adding multi-direction resize handles.
+ */
+ multiDirectional : false,
+ <div id="cfg-Ext.Resizable-height"></div>/**
+ * @cfg {Number} height The height of the element in pixels (defaults to null)
+ */
+ height : null,
+ <div id="cfg-Ext.Resizable-width"></div>/**
+ * @cfg {Number} width The width of the element in pixels (defaults to null)
+ */
+ width : null,
+ <div id="cfg-Ext.Resizable-heightIncrement"></div>/**
+ * @cfg {Number} heightIncrement The increment to snap the height resize in pixels
+ * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
+ */
+ heightIncrement : 0,
+ <div id="cfg-Ext.Resizable-widthIncrement"></div>/**
+ * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
+ * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
+ */
+ widthIncrement : 0,
+ <div id="cfg-Ext.Resizable-minHeight"></div>/**
+ * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
+ */
+ minHeight : 5,
+ <div id="cfg-Ext.Resizable-minWidth"></div>/**
+ * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
+ */
+ minWidth : 5,
+ <div id="cfg-Ext.Resizable-maxHeight"></div>/**
+ * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
+ */
+ maxHeight : 10000,
+ <div id="cfg-Ext.Resizable-maxWidth"></div>/**
+ * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
+ */
+ maxWidth : 10000,
+ <div id="cfg-Ext.Resizable-minX"></div>/**
+ * @cfg {Number} minX The minimum x for the element (defaults to 0)
+ */
+ minX: 0,
+ <div id="cfg-Ext.Resizable-minY"></div>/**
+ * @cfg {Number} minY The minimum x for the element (defaults to 0)
+ */
+ minY: 0,
+ <div id="cfg-Ext.Resizable-pinned"></div>/**
+ * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
+ * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
+ */
+ pinned : false,
+ <div id="cfg-Ext.Resizable-preserveRatio"></div>/**
+ * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
+ * and width during resize (defaults to false)
+ */
+ preserveRatio : false,
+ <div id="cfg-Ext.Resizable-resizeChild"></div>/**
+ * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
+ */
+ resizeChild : false,
+ <div id="cfg-Ext.Resizable-transparent"></div>/**
+ * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
+ */
+ transparent: false,
+ <div id="cfg-Ext.Resizable-resizeRegion"></div>/**
+ * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
+ */
+ <div id="cfg-Ext.Resizable-wrap"></div>/**
+ * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
+ * in favor of the handles config option (defaults to false)
+ */
+ <div id="cfg-Ext.Resizable-handleCls"></div>/**
+ * @cfg {String} handleCls A css class to add to each handle. Defaults to <tt>''</tt>.
+ */
+
+
+ <div id="method-Ext.Resizable-resizeTo"></div>/**
+ * Perform a manual resize and fires the 'resize' event.
+ * @param {Number} width
+ * @param {Number} height
+ */
+ resizeTo : function(width, height){
+ this.el.setSize(width, height);
+ this.updateChildSize();
+ this.fireEvent('resize', this, width, height, null);
+ },
+
+ // private
+ startSizing : function(e, handle){
+ this.fireEvent('beforeresize', this, e);
+ if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
+
+ if(!this.overlay){
+ this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: ' '}, Ext.getBody());
+ this.overlay.unselectable();
+ this.overlay.enableDisplayMode('block');
+ this.overlay.on({
+ scope: this,
+ mousemove: this.onMouseMove,
+ mouseup: this.onMouseUp
+ });
+ }
+ this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));
+
+ this.resizing = true;
+ this.startBox = this.el.getBox();
+ this.startPoint = e.getXY();
+ this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
+ (this.startBox.y + this.startBox.height) - this.startPoint[1]];
+
+ this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
+ this.overlay.show();
+
+ if(this.constrainTo) {
+ var ct = Ext.get(this.constrainTo);
+ this.resizeRegion = ct.getRegion().adjust(
+ ct.getFrameWidth('t'),
+ ct.getFrameWidth('l'),
+ -ct.getFrameWidth('b'),
+ -ct.getFrameWidth('r')
+ );
+ }
+
+ this.proxy.setStyle('visibility', 'hidden'); // workaround display none
+ this.proxy.show();
+ this.proxy.setBox(this.startBox);
+ if(!this.dynamic){
+ this.proxy.setStyle('visibility', 'visible');
+ }
+ }
+ },
+
+ // private
+ onMouseDown : function(handle, e){
+ if(this.enabled){
+ e.stopEvent();
+ this.activeHandle = handle;
+ this.startSizing(e, handle);
+ }
+ },
+
+ // private
+ onMouseUp : function(e){
+ this.activeHandle = null;
+ var size = this.resizeElement();
+ this.resizing = false;
+ this.handleOut();
+ this.overlay.hide();
+ this.proxy.hide();
+ this.fireEvent('resize', this, size.width, size.height, e);
+ },
+
+ // private
+ updateChildSize : function(){
+ if(this.resizeChild){
+ var el = this.el;
+ var child = this.resizeChild;
+ var adj = this.adjustments;
+ if(el.dom.offsetWidth){
+ var b = el.getSize(true);
+ child.setSize(b.width+adj[0], b.height+adj[1]);
+ }
+ // Second call here for IE
+ // The first call enables instant resizing and
+ // the second call corrects scroll bars if they
+ // exist
+ if(Ext.isIE){
+ setTimeout(function(){
+ if(el.dom.offsetWidth){
+ var b = el.getSize(true);
+ child.setSize(b.width+adj[0], b.height+adj[1]);
+ }
+ }, 10);
+ }
+ }
+ },
+
+ // private
+ snap : function(value, inc, min){
+ if(!inc || !value){
+ return value;
+ }
+ var newValue = value;
+ var m = value % inc;
+ if(m > 0){
+ if(m > (inc/2)){
+ newValue = value + (inc-m);
+ }else{
+ newValue = value - m;
+ }
+ }
+ return Math.max(min, newValue);
+ },
+
+ <div id="method-Ext.Resizable-resizeElement"></div>/**
+ * <p>Performs resizing of the associated Element. This method is called internally by this
+ * class, and should not be called by user code.</p>
+ * <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI
+ * component such as a Panel, this method may be overridden by specifying an implementation
+ * as a config option to provide appropriate behaviour at the end of the resize operation on
+ * mouseup, for example resizing the Panel, and relaying the Panel's content.</p>
+ * <p>The new area to be resized to is available by examining the state of the {@link #proxy}
+ * Element. Example:
+<pre><code>
+new Ext.Panel({
+ title: 'Resize me',
+ x: 100,
+ y: 100,
+ renderTo: Ext.getBody(),
+ floating: true,
+ frame: true,
+ width: 400,
+ height: 200,
+ listeners: {
+ render: function(p) {
+ new Ext.Resizable(p.getEl(), {
+ handles: 'all',
+ pinned: true,
+ transparent: true,
+ resizeElement: function() {
+ var box = this.proxy.getBox();
+ p.updateBox(box);
+ if (p.layout) {
+ p.doLayout();
+ }
+ return box;
+ }
+ });
+ }
+ }
+}).show();
+</code></pre>
+ */
+ resizeElement : function(){
+ var box = this.proxy.getBox();
+ if(this.updateBox){
+ this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
+ }else{
+ this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
+ }
+ this.updateChildSize();
+ if(!this.dynamic){
+ this.proxy.hide();
+ }
+ if(this.draggable && this.constrainTo){
+ this.dd.resetConstraints();
+ this.dd.constrainTo(this.constrainTo);
+ }
+ return box;
+ },
+
+ // private
+ constrain : function(v, diff, m, mx){
+ if(v - diff < m){
+ diff = v - m;
+ }else if(v - diff > mx){
+ diff = v - mx;
+ }
+ return diff;
+ },
+
+ // private
+ onMouseMove : function(e){
+ if(this.enabled && this.activeHandle){
+ try{// try catch so if something goes wrong the user doesn't get hung
+
+ if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
+ return;
+ }
+
+ //var curXY = this.startPoint;
+ var curSize = this.curSize || this.startBox,
+ x = this.startBox.x, y = this.startBox.y,
+ ox = x,
+ oy = y,
+ w = curSize.width,
+ h = curSize.height,
+ ow = w,
+ oh = h,
+ mw = this.minWidth,
+ mh = this.minHeight,
+ mxw = this.maxWidth,
+ mxh = this.maxHeight,
+ wi = this.widthIncrement,
+ hi = this.heightIncrement,
+ eventXY = e.getXY(),
+ diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
+ diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
+ pos = this.activeHandle.position,
+ tw,
+ th;
+
+ switch(pos){
+ case 'east':
+ w += diffX;
+ w = Math.min(Math.max(mw, w), mxw);
+ break;
+ case 'south':
+ h += diffY;
+ h = Math.min(Math.max(mh, h), mxh);
+ break;
+ case 'southeast':
+ w += diffX;
+ h += diffY;
+ w = Math.min(Math.max(mw, w), mxw);
+ h = Math.min(Math.max(mh, h), mxh);
+ break;
+ case 'north':
+ diffY = this.constrain(h, diffY, mh, mxh);
+ y += diffY;
+ h -= diffY;
+ break;
+ case 'west':
+ diffX = this.constrain(w, diffX, mw, mxw);
+ x += diffX;
+ w -= diffX;
+ break;
+ case 'northeast':
+ w += diffX;
+ w = Math.min(Math.max(mw, w), mxw);
+ diffY = this.constrain(h, diffY, mh, mxh);
+ y += diffY;
+ h -= diffY;
+ break;
+ case 'northwest':
+ diffX = this.constrain(w, diffX, mw, mxw);
+ diffY = this.constrain(h, diffY, mh, mxh);
+ y += diffY;
+ h -= diffY;
+ x += diffX;
+ w -= diffX;
+ break;
+ case 'southwest':
+ diffX = this.constrain(w, diffX, mw, mxw);
+ h += diffY;
+ h = Math.min(Math.max(mh, h), mxh);
+ x += diffX;
+ w -= diffX;
+ break;
+ }
+
+ var sw = this.snap(w, wi, mw);
+ var sh = this.snap(h, hi, mh);
+ if(sw != w || sh != h){
+ switch(pos){
+ case 'northeast':
+ y -= sh - h;
+ break;
+ case 'north':
+ y -= sh - h;
+ break;
+ case 'southwest':
+ x -= sw - w;
+ break;
+ case 'west':
+ x -= sw - w;
+ break;
+ case 'northwest':
+ x -= sw - w;
+ y -= sh - h;
+ break;
+ }
+ w = sw;
+ h = sh;
+ }
+
+ if(this.preserveRatio){
+ switch(pos){
+ case 'southeast':
+ case 'east':
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ w = ow * (h/oh);
+ break;
+ case 'south':
+ w = ow * (h/oh);
+ w = Math.min(Math.max(mw, w), mxw);
+ h = oh * (w/ow);
+ break;
+ case 'northeast':
+ w = ow * (h/oh);
+ w = Math.min(Math.max(mw, w), mxw);
+ h = oh * (w/ow);
+ break;
+ case 'north':
+ tw = w;
+ w = ow * (h/oh);
+ w = Math.min(Math.max(mw, w), mxw);
+ h = oh * (w/ow);
+ x += (tw - w) / 2;
+ break;
+ case 'southwest':
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ tw = w;
+ w = ow * (h/oh);
+ x += tw - w;
+ break;
+ case 'west':
+ th = h;
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ y += (th - h) / 2;
+ tw = w;
+ w = ow * (h/oh);
+ x += tw - w;
+ break;
+ case 'northwest':
+ tw = w;
+ th = h;
+ h = oh * (w/ow);
+ h = Math.min(Math.max(mh, h), mxh);
+ w = ow * (h/oh);
+ y += th - h;
+ x += tw - w;
+ break;
+
+ }
+ }
+ this.proxy.setBounds(x, y, w, h);
+ if(this.dynamic){
+ this.resizeElement();
+ }
+ }catch(ex){}
+ }
+ },
+
+ // private
+ handleOver : function(){
+ if(this.enabled){
+ this.el.addClass('x-resizable-over');
+ }
+ },
+
+ // private
+ handleOut : function(){
+ if(!this.resizing){
+ this.el.removeClass('x-resizable-over');
+ }
+ },
+
+ <div id="method-Ext.Resizable-getEl"></div>/**
+ * Returns the element this component is bound to.
+ * @return {Ext.Element}
+ */
+ getEl : function(){
+ return this.el;
+ },
+
+ <div id="method-Ext.Resizable-getResizeChild"></div>/**
+ * Returns the resizeChild element (or null).
+ * @return {Ext.Element}
+ */
+ getResizeChild : function(){
+ return this.resizeChild;
+ },
+
+ <div id="method-Ext.Resizable-destroy"></div>/**
+ * Destroys this resizable. If the element was wrapped and
+ * removeEl is not true then the element remains.
+ * @param {Boolean} removeEl (optional) true to remove the element from the DOM
+ */
+ destroy : function(removeEl){
+ Ext.destroy(this.dd, this.overlay, this.proxy);
+ this.overlay = null;
+ this.proxy = null;
+
+ var ps = Ext.Resizable.positions;
+ for(var k in ps){
+ if(typeof ps[k] != 'function' && this[ps[k]]){
+ this[ps[k]].destroy();
+ }
+ }
+ if(removeEl){
+ this.el.update('');
+ Ext.destroy(this.el);
+ this.el = null;
+ }
+ this.purgeListeners();
+ },
+
+ syncHandleHeight : function(){
+ var h = this.el.getHeight(true);
+ if(this.west){
+ this.west.el.setHeight(h);
+ }
+ if(this.east){
+ this.east.el.setHeight(h);
+ }
+ }
+});
+
+// private
+// hash to map config positions to true positions
+Ext.Resizable.positions = {
+ n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
+};
+
+Ext.Resizable.Handle = Ext.extend(Object, {
+ constructor : function(rz, pos, disableTrackOver, transparent, cls){
+ if(!this.tpl){
+ // only initialize the template if resizable is used
+ var tpl = Ext.DomHelper.createTemplate(
+ {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}
+ );
+ tpl.compile();
+ Ext.Resizable.Handle.prototype.tpl = tpl;
+ }
+ this.position = pos;
+ this.rz = rz;
+ this.el = this.tpl.append(rz.el.dom, [this.position], true);
+ this.el.unselectable();
+ if(transparent){
+ this.el.setOpacity(0);
+ }
+ if(!Ext.isEmpty(cls)){
+ this.el.addClass(cls);
+ }
+ this.el.on('mousedown', this.onMouseDown, this);
+ if(!disableTrackOver){
+ this.el.on({
+ scope: this,
+ mouseover: this.onMouseOver,
+ mouseout: this.onMouseOut
+ });
+ }
+ },
+
+ // private
+ afterResize : function(rz){
+ // do nothing
+ },
+ // private
+ onMouseDown : function(e){
+ this.rz.onMouseDown(this, e);
+ },
+ // private
+ onMouseOver : function(e){
+ this.rz.handleOver(this, e);
+ },
+ // private
+ onMouseOut : function(e){
+ this.rz.handleOut(this, e);
+ },
+ // private
+ destroy : function(){
+ Ext.destroy(this.el);
+ this.el = null;
+ }
+});
+</pre>
+</body>
</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff