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