PageRenderTime 40ms CodeModel.GetById 27ms app.highlight 8ms RepoModel.GetById 1ms app.codeStats 0ms

/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 */
 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=&quot;height:' + me.el.getHeight() + 'px&quot;';
332        }
333        for (; i &lt; len; i++){
334            // if specified and possible, create
335            if (handles[i] &amp;&amp; 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('&lt;div id=&quot;' + me.el.id + '-' + pos + '-handle&quot; class=&quot;' + handleCls + pos + ' ' + Ext.baseCSSPrefix + 'unselectable&quot;' + style + '&gt;&lt;/div&gt;');
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 &lt; len; i++){
349            // if specified and possible, create
350            if (handles[i] &amp;&amp; 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 &lt; 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>