/ext-4.1.0_b3/docs/source/Resizer.html

https://bitbucket.org/srogerf/javascript · HTML · 491 lines · 443 code · 48 blank · 0 comment · 0 complexity · accbdecfd6ce99bbf707204164304363 MD5 · raw file

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-resizer-Resizer'>/**
  19. </span> * Applies drag handles to an element or component to make it resizable. The drag handles are inserted into the element
  20. * (or component's element) and positioned absolute.
  21. *
  22. * Textarea and img elements will be wrapped with an additional div because these elements do not support child nodes.
  23. * The original element can be accessed through the originalTarget property.
  24. *
  25. * Here is the list of valid resize handles:
  26. *
  27. * Value Description
  28. * ------ -------------------
  29. * 'n' north
  30. * 's' south
  31. * 'e' east
  32. * 'w' west
  33. * 'nw' northwest
  34. * 'sw' southwest
  35. * 'se' southeast
  36. * 'ne' northeast
  37. * 'all' all
  38. *
  39. * {@img Ext.resizer.Resizer/Ext.resizer.Resizer.png Ext.resizer.Resizer component}
  40. *
  41. * Here's an example showing the creation of a typical Resizer:
  42. *
  43. * Ext.create('Ext.resizer.Resizer', {
  44. * el: 'elToResize',
  45. * handles: 'all',
  46. * minWidth: 200,
  47. * minHeight: 100,
  48. * maxWidth: 500,
  49. * maxHeight: 400,
  50. * pinned: true
  51. * });
  52. */
  53. Ext.define('Ext.resizer.Resizer', {
  54. mixins: {
  55. observable: 'Ext.util.Observable'
  56. },
  57. uses: ['Ext.resizer.ResizeTracker', 'Ext.Component'],
  58. alternateClassName: 'Ext.Resizable',
  59. handleCls: Ext.baseCSSPrefix + 'resizable-handle',
  60. pinnedCls: Ext.baseCSSPrefix + 'resizable-pinned',
  61. overCls: Ext.baseCSSPrefix + 'resizable-over',
  62. wrapCls: Ext.baseCSSPrefix + 'resizable-wrap',
  63. <span id='Ext-resizer-Resizer-cfg-dynamic'> /**
  64. </span> * @cfg {Boolean} dynamic
  65. * Specify as true to update the {@link #target} (Element or {@link Ext.Component Component}) dynamically during
  66. * dragging. This is `true` by default, but the {@link Ext.Component Component} class passes `false` when it is
  67. * configured as {@link Ext.Component#resizable}.
  68. *
  69. * If specified as `false`, a proxy element is displayed during the resize operation, and the {@link #target} is
  70. * updated on mouseup.
  71. */
  72. dynamic: true,
  73. <span id='Ext-resizer-Resizer-cfg-handles'> /**
  74. </span> * @cfg {String} handles
  75. * String consisting of the resize handles to display. Defaults to 's e se' for Elements and fixed position
  76. * Components. Defaults to 8 point resizing for floating Components (such as Windows). Specify either `'all'` or any
  77. * of `'n s e w ne nw se sw'`.
  78. */
  79. handles: 's e se',
  80. <span id='Ext-resizer-Resizer-cfg-height'> /**
  81. </span> * @cfg {Number} height
  82. * Optional. The height to set target to in pixels
  83. */
  84. height : null,
  85. <span id='Ext-resizer-Resizer-cfg-width'> /**
  86. </span> * @cfg {Number} width
  87. * Optional. The width to set the target to in pixels
  88. */
  89. width : null,
  90. <span id='Ext-resizer-Resizer-cfg-heightIncrement'> /**
  91. </span> * @cfg {Number} heightIncrement
  92. * The increment to snap the height resize in pixels.
  93. */
  94. heightIncrement : 0,
  95. <span id='Ext-resizer-Resizer-cfg-widthIncrement'> /**
  96. </span> * @cfg {Number} widthIncrement
  97. * The increment to snap the width resize in pixels.
  98. */
  99. widthIncrement : 0,
  100. <span id='Ext-resizer-Resizer-cfg-minHeight'> /**
  101. </span> * @cfg {Number} minHeight
  102. * The minimum height for the element
  103. */
  104. minHeight : 20,
  105. <span id='Ext-resizer-Resizer-cfg-minWidth'> /**
  106. </span> * @cfg {Number} minWidth
  107. * The minimum width for the element
  108. */
  109. minWidth : 20,
  110. <span id='Ext-resizer-Resizer-cfg-maxHeight'> /**
  111. </span> * @cfg {Number} maxHeight
  112. * The maximum height for the element
  113. */
  114. maxHeight : 10000,
  115. <span id='Ext-resizer-Resizer-cfg-maxWidth'> /**
  116. </span> * @cfg {Number} maxWidth
  117. * The maximum width for the element
  118. */
  119. maxWidth : 10000,
  120. <span id='Ext-resizer-Resizer-cfg-pinned'> /**
  121. </span> * @cfg {Boolean} pinned
  122. * True to ensure that the resize handles are always visible, false indicates resizing by cursor changes only
  123. */
  124. pinned: false,
  125. <span id='Ext-resizer-Resizer-cfg-preserveRatio'> /**
  126. </span> * @cfg {Boolean} preserveRatio
  127. * True to preserve the original ratio between height and width during resize
  128. */
  129. preserveRatio: false,
  130. <span id='Ext-resizer-Resizer-cfg-transparent'> /**
  131. </span> * @cfg {Boolean} transparent
  132. * True for transparent handles. This is only applied at config time.
  133. */
  134. transparent: false,
  135. <span id='Ext-resizer-Resizer-cfg-constrainTo'> /**
  136. </span> * @cfg {Ext.Element/Ext.util.Region} constrainTo
  137. * An element, or a {@link Ext.util.Region Region} into which the resize operation must be constrained.
  138. */
  139. possiblePositions: {
  140. n: 'north',
  141. s: 'south',
  142. e: 'east',
  143. w: 'west',
  144. se: 'southeast',
  145. sw: 'southwest',
  146. nw: 'northwest',
  147. ne: 'northeast'
  148. },
  149. <span id='Ext-resizer-Resizer-cfg-target'> /**
  150. </span> * @cfg {Ext.Element/Ext.Component} target
  151. * The Element or Component to resize.
  152. */
  153. <span id='Ext-resizer-Resizer-property-el'> /**
  154. </span> * @property {Ext.Element} el
  155. * Outer element for resizing behavior.
  156. */
  157. constructor: function(config) {
  158. var me = this,
  159. target,
  160. tag,
  161. handles = me.handles,
  162. handleCls,
  163. possibles,
  164. len,
  165. i = 0,
  166. pos,
  167. handleEls = [],
  168. eastWestStyle, style,
  169. box;
  170. me.addEvents(
  171. <span id='Ext-resizer-Resizer-event-beforeresize'> /**
  172. </span> * @event beforeresize
  173. * Fired before resize is allowed. Return false to cancel resize.
  174. * @param {Ext.resizer.Resizer} this
  175. * @param {Number} width The start width
  176. * @param {Number} height The start height
  177. * @param {Ext.EventObject} e The mousedown event
  178. */
  179. 'beforeresize',
  180. <span id='Ext-resizer-Resizer-event-resizedrag'> /**
  181. </span> * @event resizedrag
  182. * Fires during resizing. Return false to cancel resize.
  183. * @param {Ext.resizer.Resizer} this
  184. * @param {Number} width The new width
  185. * @param {Number} height The new height
  186. * @param {Ext.EventObject} e The mousedown event
  187. */
  188. 'resizedrag',
  189. <span id='Ext-resizer-Resizer-event-resize'> /**
  190. </span> * @event resize
  191. * Fired after a resize.
  192. * @param {Ext.resizer.Resizer} this
  193. * @param {Number} width The new width
  194. * @param {Number} height The new height
  195. * @param {Ext.EventObject} e The mouseup event
  196. */
  197. 'resize'
  198. );
  199. if (Ext.isString(config) || Ext.isElement(config) || config.dom) {
  200. target = config;
  201. config = arguments[1] || {};
  202. config.target = target;
  203. }
  204. // will apply config to this
  205. me.mixins.observable.constructor.call(me, config);
  206. // If target is a Component, ensure that we pull the element out.
  207. // Resizer must examine the underlying Element.
  208. target = me.target;
  209. if (target) {
  210. if (target.isComponent) {
  211. me.el = target.getEl();
  212. if (target.minWidth) {
  213. me.minWidth = target.minWidth;
  214. }
  215. if (target.minHeight) {
  216. me.minHeight = target.minHeight;
  217. }
  218. if (target.maxWidth) {
  219. me.maxWidth = target.maxWidth;
  220. }
  221. if (target.maxHeight) {
  222. me.maxHeight = target.maxHeight;
  223. }
  224. if (target.floating) {
  225. if (!me.hasOwnProperty('handles')) {
  226. me.handles = 'n ne e se s sw w nw';
  227. }
  228. }
  229. } else {
  230. me.el = me.target = Ext.get(target);
  231. }
  232. }
  233. // Backwards compatibility with Ext3.x's Resizable which used el as a config.
  234. else {
  235. me.target = me.el = Ext.get(me.el);
  236. }
  237. // Tags like textarea and img cannot
  238. // have children and therefore must
  239. // be wrapped
  240. tag = me.el.dom.tagName;
  241. if (tag == 'TEXTAREA' || tag == 'IMG' || tag == 'TABLE') {
  242. <span id='Ext-resizer-Resizer-property-originalTarget'> /**
  243. </span> * @property {Ext.Element/Ext.Component} originalTarget
  244. * Reference to the original resize target if the element of the original resize target was an IMG or a
  245. * TEXTAREA which must be wrapped in a DIV.
  246. */
  247. me.originalTarget = me.target.isComponent ? me.target.getEl() : me.target;
  248. me.target = me.el = me.el.wrap({
  249. cls: me.wrapCls,
  250. id: me.el.id + '-rzwrap'
  251. });
  252. // Transfer originalTarget's positioning/sizing
  253. me.el.setPositioning(me.originalTarget.getPositioning());
  254. me.originalTarget.clearPositioning();
  255. box = me.originalTarget.getBox();
  256. me.el.setBox(box);
  257. }
  258. // Position the element, this enables us to absolute position
  259. // the handles within this.el
  260. me.el.position();
  261. if (me.pinned) {
  262. me.el.addCls(me.pinnedCls);
  263. }
  264. <span id='Ext-resizer-Resizer-property-resizeTracker'> /**
  265. </span> * @property {Ext.resizer.ResizeTracker} resizeTracker
  266. */
  267. me.resizeTracker = new Ext.resizer.ResizeTracker({
  268. disabled: me.disabled,
  269. target: me.target,
  270. constrainTo: me.constrainTo,
  271. overCls: me.overCls,
  272. throttle: me.throttle,
  273. originalTarget: me.originalTarget,
  274. delegate: '.' + me.handleCls,
  275. dynamic: me.dynamic,
  276. preserveRatio: me.preserveRatio,
  277. heightIncrement: me.heightIncrement,
  278. widthIncrement: me.widthIncrement,
  279. minHeight: me.minHeight,
  280. maxHeight: me.maxHeight,
  281. minWidth: me.minWidth,
  282. maxWidth: me.maxWidth
  283. });
  284. // Relay the ResizeTracker's superclass events as our own resize events
  285. me.resizeTracker.on({
  286. mousedown: me.onBeforeResize,
  287. drag: me.onResize,
  288. dragend: me.onResizeEnd,
  289. scope: me
  290. });
  291. if (me.handles == 'all') {
  292. me.handles = 'n s e w ne nw se sw';
  293. }
  294. handles = me.handles = me.handles.split(/ |\s*?[,;]\s*?/);
  295. possibles = me.possiblePositions;
  296. len = handles.length;
  297. handleCls = me.handleCls + ' ' + (me.target.isComponent ? (me.target.baseCls + '-handle ') : '') + me.handleCls + '-';
  298. // Needs heighting on IE6!
  299. if (Ext.isIE6) {
  300. eastWestStyle = ' style=&quot;height:' + me.el.getHeight() + 'px&quot;';
  301. }
  302. for (; i &lt; len; i++){
  303. // if specified and possible, create
  304. if (handles[i] &amp;&amp; possibles[handles[i]]) {
  305. pos = possibles[handles[i]];
  306. if (pos === 'east' || pos === 'west') {
  307. style = eastWestStyle;
  308. } else {
  309. style = '';
  310. }
  311. handleEls.push('&lt;div id=&quot;' + me.el.id + '-' + pos + '-handle&quot; class=&quot;' + handleCls + pos + ' ' + Ext.baseCSSPrefix + 'unselectable&quot;' + style + '&gt;&lt;/div&gt;');
  312. }
  313. }
  314. Ext.DomHelper.append(me.el, handleEls.join(''));
  315. // store a reference to each handle elelemtn in this.east, this.west, etc
  316. for (i = 0; i &lt; len; i++){
  317. // if specified and possible, create
  318. if (handles[i] &amp;&amp; possibles[handles[i]]) {
  319. pos = possibles[handles[i]];
  320. me[pos] = me.el.getById(me.el.id + '-' + pos + '-handle');
  321. me[pos].region = pos;
  322. me[pos].unselectable();
  323. if (me.transparent) {
  324. me[pos].setOpacity(0);
  325. }
  326. }
  327. }
  328. // Constrain within configured maxima
  329. if (Ext.isNumber(me.width)) {
  330. me.width = Ext.Number.constrain(me.width, me.minWidth, me.maxWidth);
  331. }
  332. if (Ext.isNumber(me.height)) {
  333. me.height = Ext.Number.constrain(me.height, me.minHeight, me.maxHeight);
  334. }
  335. // Size the element
  336. if (me.width !== null || me.height !== null) {
  337. if (me.originalTarget) {
  338. me.originalTarget.setWidth(me.width);
  339. me.originalTarget.setHeight(me.height);
  340. }
  341. me.resizeTo(me.width, me.height);
  342. }
  343. me.forceHandlesHeight();
  344. },
  345. disable: function() {
  346. this.resizeTracker.disable();
  347. },
  348. enable: function() {
  349. this.resizeTracker.enable();
  350. },
  351. <span id='Ext-resizer-Resizer-method-onBeforeResize'> /**
  352. </span> * @private Relay the Tracker's mousedown event as beforeresize
  353. * @param tracker The Resizer
  354. * @param e The Event
  355. */
  356. onBeforeResize: function(tracker, e) {
  357. var box = this.target.getBox();
  358. return this.fireEvent('beforeresize', this, box.width, box.height, e);
  359. },
  360. <span id='Ext-resizer-Resizer-method-onResize'> /**
  361. </span> * @private Relay the Tracker's drag event as resizedrag
  362. * @param tracker The Resizer
  363. * @param e The Event
  364. */
  365. onResize: function(tracker, e) {
  366. var me = this,
  367. box = me.target.getBox();
  368. me.forceHandlesHeight();
  369. return me.fireEvent('resizedrag', me, box.width, box.height, e);
  370. },
  371. <span id='Ext-resizer-Resizer-method-onResizeEnd'> /**
  372. </span> * @private Relay the Tracker's dragend event as resize
  373. * @param tracker The Resizer
  374. * @param e The Event
  375. */
  376. onResizeEnd: function(tracker, e) {
  377. var me = this,
  378. box = me.target.getBox();
  379. me.forceHandlesHeight();
  380. return me.fireEvent('resize', me, box.width, box.height, e);
  381. },
  382. <span id='Ext-resizer-Resizer-method-resizeTo'> /**
  383. </span> * Perform a manual resize and fires the 'resize' event.
  384. * @param {Number} width
  385. * @param {Number} height
  386. */
  387. resizeTo : function(width, height){
  388. this.target.setSize(width, height);
  389. this.fireEvent('resize', this, width, height, null);
  390. },
  391. <span id='Ext-resizer-Resizer-method-getEl'> /**
  392. </span> * Returns the element that was configured with the el or target config property. If a component was configured with
  393. * the target property then this will return the element of this component.
  394. *
  395. * Textarea and img elements will be wrapped with an additional div because these elements do not support child
  396. * nodes. The original element can be accessed through the originalTarget property.
  397. * @return {Ext.Element} element
  398. */
  399. getEl : function() {
  400. return this.el;
  401. },
  402. <span id='Ext-resizer-Resizer-method-getTarget'> /**
  403. </span> * Returns the element or component that was configured with the target config property.
  404. *
  405. * Textarea and img elements will be wrapped with an additional div because these elements do not support child
  406. * nodes. The original element can be accessed through the originalTarget property.
  407. * @return {Ext.Element/Ext.Component}
  408. */
  409. getTarget: function() {
  410. return this.target;
  411. },
  412. destroy: function() {
  413. var i = 0,
  414. handles = this.handles,
  415. len = handles.length,
  416. positions = this.possiblePositions;
  417. for (; i &lt; len; i++) {
  418. this[positions[handles[i]]].remove();
  419. }
  420. },
  421. <span id='Ext-resizer-Resizer-method-forceHandlesHeight'> /**
  422. </span> * @private
  423. * Fix IE6 handle height issue.
  424. */
  425. forceHandlesHeight : function() {
  426. var me = this,
  427. handle;
  428. if (Ext.isIE6) {
  429. handle = me.east;
  430. if (handle) {
  431. handle.setHeight(me.el.getHeight());
  432. }
  433. handle = me.west;
  434. if (handle) {
  435. handle.setHeight(me.el.getHeight());
  436. }
  437. me.el.repaint();
  438. }
  439. }
  440. });
  441. </pre>
  442. </body>
  443. </html>