sync.splitpane.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

/**
 * Component rendering peer: SplitPane
 */
Echo.Sync.SplitPane = Core.extend(Echo.Render.ComponentSync, {

    $static: {
    
        /**    
         * Describes the configuration of a child pane of the SplitPane,
         * including the child component and scroll bar positions.
         */
        ChildPane: Core.extend({
        
            /** 
             * Minimum pixel size of the child pane.
             * @type Number
             */
            minimumSize: 0,
            
            /** 
             * Maximum pixel size of the child pane.
             * @type Number
             */
            maximumSize: null,
            
            /**
             * The child pane <code>Echo.Component</code> instance.
             * @type Echo.Component
             */
            component: null,
            
            /**
             * The value of the child pane <code>Echo.Component</code>'s <code>layoutData</code> property.
             */
            layoutData: null,
            
            /** 
             * Horizontal scroll position, in pixels.
             * @type Number.
             */
            scrollLeft: 0,

            /** 
             * Vertical scroll position, in pixels.
             * @type Number.
             */
            scrollTop: 0,
            
            /** 
             * Flag indicating that scroll position should be reset on next renderDisplay() invocation.
             * @type Boolean
             */
            scrollRequired: false,
            
            /**
             * Flag indicating whether sizing information is permanent (fixed pixel-based) or variable (percent-based).
             * @type Boolean
             */
            _permanentSizes: false,
            
            /**
             * The SplitPane component rendering peer using this <code>ChildPane</code> object.
             * @type Echo.Sync.SplitPane
             */
            _peer: null,
        
            /**
             * Creates a new PaneConfiguration instance
             * 
             * @param {Echo.Sync.SplitPane} splitPanePeer the relevant componentPeer
             * @param {Echo.Component} component the child component
             */
            $construct: function(splitPanePeer, component) {
                this._peer = splitPanePeer;
                this.component = component;
                this.layoutData = component.render("layoutData");
            },
            
            /**
             * Load minimum and maximum separator positions for panes.
             */
            loadDisplayData: function() {
                if (this._permanentSizes) {
                    // Pane size constraints have been loaded for this ChildPane, and will not ever change
                    // (because they are pixel rather percent-based.
                    return;
                }
                
                var size;
                this._permanentSizes = true;
                if (this.layoutData) {
                    if (this.layoutData.minimumSize) {
                        if (Echo.Sync.Extent.isPercent(this.layoutData.minimumSize)) {
                            size = this._peer._getSize();
                            this.minimumSize = Math.round((this._peer._orientationVertical ? size.height : size.width) *
                                    parseInt(this.layoutData.minimumSize, 10) / 100);
                            this._permanentSizes = false;
                        } else {
                            this.minimumSize = Math.round(Echo.Sync.Extent.toPixels(this.layoutData.minimumSize, 
                                    !this._peer._orientationVertical));
                        }
                    }
                    if (this.layoutData.maximumSize) {
                        if (Echo.Sync.Extent.isPercent(this.layoutData.maximumSize)) {
                            size = this._peer._getSize();
                            this.maximumSize = Math.round((this._peer._orientationVertical ? size.height : size.width) *
                                    parseInt(this.layoutData.maximumSize, 10) / 100);
                            this._permanentSizes = false;
                        } else {
                            this.maximumSize = Math.round(Echo.Sync.Extent.toPixels(this.layoutData.maximumSize, 
                                    !this._peer._orientationVertical));
                        }
                    }
                }
            },
            
            /**
             * Update pane DIV element's scroll positions to reflect those stored in this object.
             *  
             * @param paneDiv the pane's DIV element
             */
            loadScrollPositions: function(paneDiv) {
                paneDiv.scrollLeft = this.scrollLeft;
                paneDiv.scrollTop = this.scrollTop;
            },
            
            /**
             * Retrieve scroll bar positions from pane DIV element and store in this object.
             * 
             * @param paneDiv the pane's DIV element
             */
            storeScrollPositions: function(paneDiv) {
                this.scrollLeft = paneDiv.scrollLeft;
                this.scrollTop = paneDiv.scrollTop;
            }
        })
    },

    $load: function() {
        Echo.Render.registerPeer("SplitPane", this);
    },

    /**
     * Array containing two PaneConfiguration instances, representing the state of each child pane.
     * @type Array
     */
    _childPanes: null,
    
    /**
     * Array containing the elements of the first and second child pane DIVs.  This array always has two elements.
     * @type Array
     */
    _paneDivs: null,
    
    /**
     * The rendered separator DIV element.
     * @type Element
     */
    _separatorDiv: null,
    
    /**
     * Flag indicating whether separator is to be automatically positioned.
     * @type Boolean
     */
    _autoPositioned: false,

    /**
     * Overlay DIV which covers other elements (such as IFRAMEs) when dragging which may otherwise suppress events.
     * @type Element
     */
    _overlay: null,
    
    /**
     * Flag indicating whether the renderDisplay() method must be invoked on this peer 
     * (and descendant component peers).
     * @type Number
     */
    _redisplayRequired: false,
    
    /**
     * The user's desired position of the separator.  This is the last
     * position to which the user dragged the separator or the last position
     * that the separator was explicitly set to.  This value may not be the
     * actual separator position, in cases where other constraints have
     * temporarily adjusted it.
     * This is value is retained such that if constraints are lifted, the 
     * separator position will return to where the user last preferred it.
     * 
     * @type Extent
     */
    _requested: null,
    
    /**
     * Current rendered separator position.
     * @type Number
     */
    _rendered: null,

    /**
     * Method reference to this._processSeparatorMouseMove().
     * @type Function
     */
    _processSeparatorMouseMoveRef: null,

    /**
     * Method reference to this._processSeparatorMouseUp().
     * @type Function
     */
    _processSeparatorMouseUpRef: null,

    /**
     * Flag indicating whether initial automatic sizing operation (which occurs on first invocation of 
     * <code>renderDisplay()</code> after <code>renderAdd()</code>) has been completed.
     * @type Boolean
     */
    _initialAutoSizeComplete: false,
    
    /**
     * The rendered size of the SplitPane outer DIV.  This value is lazily loaded by
     * _getSize(), thus it should always be retrieved by invoking _getSize().
     * This property will be cleared any time the size changes.
     */
    _size: null,

    /** Constructor. */
    $construct: function() {
        this._childPanes = [];
        this._paneDivs = [];
        this._processSeparatorMouseMoveRef = Core.method(this, this._processSeparatorMouseMove);
        this._processSeparatorMouseUpRef = Core.method(this, this._processSeparatorMouseUp);
    },
    
    /**
     * Converts a desired separator position into a render-able separator position that
     * complies with the SplitPane's separator bounds (miniumSize and maximumSize of child
     * component layout data).
     * 
     * @param {Number} position requested separator position
     * @return the bounded separator position
     * @type Number
     */
    _getBoundedSeparatorPosition: function(position) {
        if (this._childPanes[1]) {
            var totalSize = this._orientationVertical ? this._getSize().height : this._getSize().width;
            if (position > totalSize - this._childPanes[1].minimumSize - this._separatorSize) {
                position = totalSize - this._childPanes[1].minimumSize - this._separatorSize;
            } else if (this._childPanes[1].maximumSize != null
                    && position < totalSize - this._childPanes[1].maximumSize - this._separatorSize) {
                position = totalSize - this._childPanes[1].maximumSize - this._separatorSize;
            }
        }
        if (this._childPanes[0]) {
            if (position < this._childPanes[0].minimumSize) {
                position = this._childPanes[0].minimumSize;
            } else if (this._childPanes[0].maximumSize != null && position > this._childPanes[0].maximumSize) {
                position = this._childPanes[0].maximumSize;
            }
        }
        return position;
    },
    
    /**
     * Determines the number of pixels of inset margin specified in a layout data object.
     * Horizontal or vertical pixels will be analyzed based on the SplitPane's orientation.
     * The result of this method can be subtracted from the desired height or width of a pane
     * to determine the appropriate value to set for a CSS width/height attribute.
     * 
     * @param {Object} layoutData a component layout data object
     * @return the number of inset pixels
     * @type Number 
     */
    _getInsetsSizeAdjustment: function(position, layoutData) {
        if (!layoutData || layoutData.insets == null) {
            return 0;
        }
        var layoutDataInsets = Echo.Sync.Insets.toPixels(layoutData.insets);
        var adjustment;
        if (this._orientationVertical) {
            adjustment = layoutDataInsets.top + layoutDataInsets.bottom;
        } else {
            adjustment = layoutDataInsets.left + layoutDataInsets.right;
        }
        if (position != null && adjustment > position) {
            adjustment = position;
        }
        return adjustment;
    },
    
    /**
     * Calculates the preferred rendered size of the SplitPane by measuring the sizes of its content and/or
     * invoking getPreferredSize() on its content (if supported).
     * 
     * @see Echo.Render.ComponnetSync#getPreferredSize
     */
    getPreferredSize: function(dimension) {
        if (this.component.children.length === 0) {
            return null;
        }
        
        var bounds;
        
        dimension = dimension || (Echo.Render.ComponentSync.SIZE_WIDTH | Echo.Render.ComponentSync.SIZE_HEIGHT);        

        // Determine size of pane 0.
        var size0;
        if (this.component.children[0].peer.getPreferredSize) {
            // Use getPreferredSize() if available.
            size0 = this.component.children[0].peer.getPreferredSize(dimension);
        } else if (!this.component.children[0].pane && (dimension & Echo.Render.ComponentSync.SIZE_HEIGHT) &&
                this._paneDivs[0].firstChild) {
            // Measure height of non-pane child (assuming height is being requested).
            bounds = new Core.Web.Measure.Bounds(this._paneDivs[0].firstChild);
            size0 = { height: bounds.height === 0 ? null : bounds.height };
        } else {
            // Pane 0 cannot be measured.
            size0 = { };
        }