Alien-Web-ExtJS-V3

 view release on metacpan or  search on metacpan

share/docs/source/Resizable.html  view on Meta::CPAN

 * 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';
            }
        }

<span id='Ext-Resizable-property-proxy'>        /**
</span>         * 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' &amp;&amp; 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 &lt; len; i++){
            if(hs[i] &amp;&amp; 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 &amp;&amp; (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(
<span id='Ext-Resizable-event-beforeresize'>            /**
</span>             * @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',
<span id='Ext-Resizable-event-resize'>            /**
</span>             * @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'
        );

share/docs/source/Resizable.html  view on Meta::CPAN

<span id='Ext-Resizable-cfg-multiDirectional'>    /**
</span>     * @cfg {Boolean} multiDirectional &lt;b&gt;Deprecated&lt;/b&gt;.  Deprecated style of adding multi-direction resize handles.
     */
    multiDirectional : false,
<span id='Ext-Resizable-cfg-height'>    /**
</span>     * @cfg {Number} height The height of the element in pixels (defaults to null)
     */
    height : null,
<span id='Ext-Resizable-cfg-width'>    /**
</span>     * @cfg {Number} width The width of the element in pixels (defaults to null)
     */
    width : null,
<span id='Ext-Resizable-cfg-heightIncrement'>    /**
</span>     * @cfg {Number} heightIncrement The increment to snap the height resize in pixels
     * (only applies if &lt;code&gt;{@link #dynamic}==true&lt;/code&gt;). Defaults to &lt;tt&gt;0&lt;/tt&gt;.
     */
    heightIncrement : 0,
<span id='Ext-Resizable-cfg-widthIncrement'>    /**
</span>     * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
     * (only applies if &lt;code&gt;{@link #dynamic}==true&lt;/code&gt;). Defaults to &lt;tt&gt;0&lt;/tt&gt;.
     */
    widthIncrement : 0,
<span id='Ext-Resizable-cfg-minHeight'>    /**
</span>     * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
     */
    minHeight : 5,
<span id='Ext-Resizable-cfg-minWidth'>    /**
</span>     * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
     */
    minWidth : 5,
<span id='Ext-Resizable-cfg-maxHeight'>    /**
</span>     * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
     */
    maxHeight : 10000,
<span id='Ext-Resizable-cfg-maxWidth'>    /**
</span>     * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
     */
    maxWidth : 10000,
<span id='Ext-Resizable-cfg-minX'>    /**
</span>     * @cfg {Number} minX The minimum x for the element (defaults to 0)
     */
    minX: 0,
<span id='Ext-Resizable-cfg-minY'>    /**
</span>     * @cfg {Number} minY The minimum x for the element (defaults to 0)
     */
    minY: 0,
<span id='Ext-Resizable-cfg-pinned'>    /**
</span>     * @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,
<span id='Ext-Resizable-cfg-preserveRatio'>    /**
</span>     * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
     * and width during resize (defaults to false)
     */
    preserveRatio : false,
<span id='Ext-Resizable-cfg-resizeChild'>    /**
</span>     * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
     */
    resizeChild : false,
<span id='Ext-Resizable-cfg-transparent'>    /**
</span>     * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
     */
    transparent: false,
<span id='Ext-Resizable-cfg-resizeRegion'>    /**
</span>     * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
     */
<span id='Ext-Resizable-cfg-wrap'>    /**
</span>     * @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)
     */
<span id='Ext-Resizable-cfg-handleCls'>    /**
</span>     * @cfg {String} handleCls A css class to add to each handle. Defaults to &lt;tt&gt;''&lt;/tt&gt;.
     */


<span id='Ext-Resizable-method-resizeTo'>    /**
</span>     * 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);
    },

<span id='Ext-Resizable-method-startSizing'>    // private
</span>    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: '&amp;#160;'}, 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

share/docs/source/Resizable.html  view on Meta::CPAN

            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.isIE9m){
                setTimeout(function(){
                    if(el.dom.offsetWidth){
                        var b = el.getSize(true);
                        child.setSize(b.width+adj[0], b.height+adj[1]);
                    }
                }, 10);
            }
        }
    },

<span id='Ext-Resizable-method-snap'>    // private
</span>    snap : function(value, inc, min){
        if(!inc || !value){
            return value;
        }
        var newValue = value;
        var m = value % inc;
        if(m &gt; 0){
            if(m &gt; (inc/2)){
                newValue = value + (inc-m);
            }else{
                newValue = value - m;
            }
        }
        return Math.max(min, newValue);
    },

<span id='Ext-Resizable-method-resizeElement'>    /**
</span>     * &lt;p&gt;Performs resizing of the associated Element. This method is called internally by this
     * class, and should not be called by user code.&lt;/p&gt;
     * &lt;p&gt;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.&lt;/p&gt;
     * &lt;p&gt;The new area to be resized to is available by examining the state of the {@link #proxy}
     * Element. Example:
&lt;pre&gt;&lt;code&gt;
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();
&lt;/code&gt;&lt;/pre&gt;
     */
    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 &amp;&amp; this.constrainTo){
            this.dd.resetConstraints();
            this.dd.constrainTo(this.constrainTo);
        }
        return box;
    },

<span id='Ext-Resizable-method-constrain'>    // private
</span>    constrain : function(v, diff, m, mx){
        if(v - diff &lt; m){
            diff = v - m;
        }else if(v - diff &gt; mx){
            diff = v - mx;
        }
        return diff;
    },

<span id='Ext-Resizable-method-onMouseMove'>    // private
</span>    onMouseMove : function(e){
        if(this.enabled &amp;&amp; this.activeHandle){
            try{// try catch so if something goes wrong the user doesn't get hung

            if(this.resizeRegion &amp;&amp; !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,

share/docs/source/Resizable.html  view on Meta::CPAN

    },

<span id='Ext-Resizable-method-getEl'>    /**
</span>     * Returns the element this component is bound to.
     * @return {Ext.Element}
     */
    getEl : function(){
        return this.el;
    },

<span id='Ext-Resizable-method-getResizeChild'>    /**
</span>     * Returns the resizeChild element (or null).
     * @return {Ext.Element}
     */
    getResizeChild : function(){
        return this.resizeChild;
    },

<span id='Ext-Resizable-method-destroy'>    /**
</span>     * 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' &amp;&amp; this[ps[k]]){
                this[ps[k]].destroy();
            }
        }
        if(removeEl){
            this.el.update('');
            Ext.destroy(this.el);
            this.el = null;
        }
        this.purgeListeners();
    },

<span id='Ext-Resizable-method-syncHandleHeight'>    syncHandleHeight : function(){
</span>        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>