view release on metacpan or  search on metacpan

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

 * <br><br>
 * Usage:
 * <pre><code>
var split = new Ext.SplitBar("elementToDrag", "elementToSize",
                   Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
split.minSize = 100;
split.maxSize = 600;
split.animate = true;
split.on('moved', splitterMoved);
</code></pre>
 * @constructor
 * Create a new SplitBar
 * @param {Mixed} dragElement The element to be dragged and act as the SplitBar.
 * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged
 * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
 * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or
                        Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
                        position of the SplitBar).
 */
Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){

<span id='Ext-SplitBar-property-el'>    /** @private */
</span>    this.el = Ext.get(dragElement, true);
    this.el.unselectable();
<span id='Ext-SplitBar-property-resizingEl'>    /** @private */
</span>    this.resizingEl = Ext.get(resizingElement, true);

<span id='Ext-SplitBar-property-orientation'>    /**
</span>     * @private
     * The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
     * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
     * @type Number
     */
    this.orientation = orientation || Ext.SplitBar.HORIZONTAL;

<span id='Ext-SplitBar-property-tickSize'>    /**
</span>     * The increment, in pixels by which to move this SplitBar. When &lt;i&gt;undefined&lt;/i&gt;, the SplitBar moves smoothly.
     * @type Number
     * @property tickSize
     */
<span id='Ext-SplitBar-property-minSize'>    /**
</span>     * The minimum size of the resizing element. (Defaults to 0)
     * @type Number
     */
    this.minSize = 0;

<span id='Ext-SplitBar-property-maxSize'>    /**
</span>     * The maximum size of the resizing element. (Defaults to 2000)
     * @type Number
     */
    this.maxSize = 2000;

<span id='Ext-SplitBar-property-animate'>    /**
</span>     * Whether to animate the transition to the new size
     * @type Boolean
     */
    this.animate = false;

<span id='Ext-SplitBar-property-useShim'>    /**
</span>     * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
     * @type Boolean
     */
    this.useShim = false;

<span id='Ext-SplitBar-property-shim'>    /** @private */
</span>    this.shim = null;

    if(!existingProxy){
<span id='Ext-SplitBar-property-proxy'>        /** @private */
</span>        this.proxy = Ext.SplitBar.createProxy(this.orientation);
    }else{
        this.proxy = Ext.get(existingProxy).dom;
    }
<span id='Ext-SplitBar-property-dd'>    /** @private */
</span>    this.dd = new Ext.dd.DDProxy(this.el.dom.id, &quot;XSplitBars&quot;, {dragElId : this.proxy.id});

<span id='Ext-SplitBar-property-b4StartDrag'>    /** @private */
</span>    this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);

<span id='Ext-SplitBar-property-endDrag'>    /** @private */
</span>    this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);

<span id='Ext-SplitBar-property-dragSpecs'>    /** @private */
</span>    this.dragSpecs = {};

<span id='Ext-SplitBar-property-adapter'>    /**
</span>     * @private The adapter to use to positon and resize elements
     */
    this.adapter = new Ext.SplitBar.BasicLayoutAdapter();
    this.adapter.init(this);

    if(this.orientation == Ext.SplitBar.HORIZONTAL){
<span id='global-property-placement'>        /** @ignore */
</span>        this.placement = placement || (this.el.getX() &gt; this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);
        this.el.addClass(&quot;x-splitbar-h&quot;);
    }else{
<span id='global-property-placement'>        /** @ignore */
</span>        this.placement = placement || (this.el.getY() &gt; this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);
        this.el.addClass(&quot;x-splitbar-v&quot;);
    }

    this.addEvents(
<span id='Ext-SplitBar-event-resize'>        /**
</span>         * @event resize
         * Fires when the splitter is moved (alias for {@link #moved})
         * @param {Ext.SplitBar} this
         * @param {Number} newSize the new width or height
         */
        &quot;resize&quot;,
<span id='Ext-SplitBar-event-moved'>        /**
</span>         * @event moved
         * Fires when the splitter is moved
         * @param {Ext.SplitBar} this
         * @param {Number} newSize the new width or height
         */
        &quot;moved&quot;,
<span id='Ext-SplitBar-event-beforeresize'>        /**
</span>         * @event beforeresize
         * Fires before the splitter is dragged
         * @param {Ext.SplitBar} this
         */
        &quot;beforeresize&quot;,

        &quot;beforeapply&quot;
    );

    Ext.SplitBar.superclass.constructor.call(this);
};

Ext.extend(Ext.SplitBar, Ext.util.Observable, {
    onStartProxyDrag : function(x, y){
        this.fireEvent(&quot;beforeresize&quot;, this);
        this.overlay =  Ext.DomHelper.append(document.body,  {cls: &quot;x-drag-overlay&quot;, html: &quot;&amp;#160;&quot;}, true);
        this.overlay.unselectable();
        this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
        this.overlay.show();
        Ext.get(this.proxy).setDisplayed(&quot;block&quot;);
        var size = this.adapter.getElementSize(this);
        this.activeMinSize = this.getMinimumSize();
        this.activeMaxSize = this.getMaximumSize();
        var c1 = size - this.activeMinSize;
        var c2 = Math.max(this.activeMaxSize - size, 0);
        if(this.orientation == Ext.SplitBar.HORIZONTAL){
            this.dd.resetConstraints();
            this.dd.setXConstraint(
                this.placement == Ext.SplitBar.LEFT ? c1 : c2,
                this.placement == Ext.SplitBar.LEFT ? c2 : c1,
                this.tickSize
            );
            this.dd.setYConstraint(0, 0);
        }else{
            this.dd.resetConstraints();
            this.dd.setXConstraint(0, 0);
            this.dd.setYConstraint(
                this.placement == Ext.SplitBar.TOP ? c1 : c2,
                this.placement == Ext.SplitBar.TOP ? c2 : c1,
                this.tickSize
            );
         }
        this.dragSpecs.startSize = size;
        this.dragSpecs.startPoint = [x, y];
        Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
    },

<span id='Ext-SplitBar-method-onEndProxyDrag'>    /**
</span>     * @private Called after the drag operation by the DDProxy
     */
    onEndProxyDrag : function(e){
        Ext.get(this.proxy).setDisplayed(false);
        var endPoint = Ext.lib.Event.getXY(e);
        if(this.overlay){
            Ext.destroy(this.overlay);
            delete this.overlay;
        }
        var newSize;
        if(this.orientation == Ext.SplitBar.HORIZONTAL){
            newSize = this.dragSpecs.startSize +
                (this.placement == Ext.SplitBar.LEFT ?
                    endPoint[0] - this.dragSpecs.startPoint[0] :
                    this.dragSpecs.startPoint[0] - endPoint[0]
                );
        }else{
            newSize = this.dragSpecs.startSize +
                (this.placement == Ext.SplitBar.TOP ?
                    endPoint[1] - this.dragSpecs.startPoint[1] :
                    this.dragSpecs.startPoint[1] - endPoint[1]
                );
        }
        newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
        if(newSize != this.dragSpecs.startSize){
            if(this.fireEvent('beforeapply', this, newSize) !== false){
                this.adapter.setElementSize(this, newSize);
                this.fireEvent(&quot;moved&quot;, this, newSize);
                this.fireEvent(&quot;resize&quot;, this, newSize);
            }
        }
    },

<span id='Ext-SplitBar-method-getAdapter'>    /**
</span>     * Get the adapter this SplitBar uses
     * @return The adapter object
     */
    getAdapter : function(){
        return this.adapter;
    },

<span id='Ext-SplitBar-method-setAdapter'>    /**
</span>     * Set the adapter this SplitBar uses
     * @param {Object} adapter A SplitBar adapter object
     */
    setAdapter : function(adapter){
        this.adapter = adapter;
        this.adapter.init(this);
    },

<span id='Ext-SplitBar-method-getMinimumSize'>    /**
</span>     * Gets the minimum size for the resizing element
     * @return {Number} The minimum size
     */
    getMinimumSize : function(){
        return this.minSize;
    },

<span id='Ext-SplitBar-method-setMinimumSize'>    /**
</span>     * Sets the minimum size for the resizing element
     * @param {Number} minSize The minimum size
     */
    setMinimumSize : function(minSize){
        this.minSize = minSize;
    },

<span id='Ext-SplitBar-method-getMaximumSize'>    /**
</span>     * Gets the maximum size for the resizing element