sync.windowpane.js

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

     */
    _processControlRolloverEnter: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            return true;
        }
        Echo.Sync.ImageReference.renderImg(e.registeredTarget._controlData.rolloverIcon, e.registeredTarget.firstChild);
    },
    
    /**
     * Processes a mouse rollover exit event on a specific window control button. 
     */
    _processControlRolloverExit: function(e) {
        Echo.Sync.ImageReference.renderImg(e.registeredTarget._controlData.icon, e.registeredTarget.firstChild);
    },
    
    /**
     * Processes a key down event in the window.
     */
    _processKeyDown: function(e) {
        if (e.keyCode == 27) {
            this.component.userClose();
            Core.Web.DOM.preventEventDefault(e);
            return false;
        }
        return true;
    },

    /**
     * Processes a key press event in the window.
     */
    _processKeyPress: function(e) {
        if (e.keyCode == 27) {
            Core.Web.DOM.preventEventDefault(e);
            return false;
        }
        return true;
    },
    
    /**
     * Processes a (captured) focus click within the window region.
     */
    _processFocusClick: function(e) { 
        if (!this.client || !this.client.verifyInput(this.component)) {
            return true;
        }
        this.component.parent.peer.raise(this.component);
        return true;
    },
    
    /**
     * Processes a mouse down event on the window title bar (move drag).
     */
    _processTitleBarMouseDown: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            return true;
        }
        
        // Ignore mouse down clicks on control icons.
        var target = e.target;
        while (target != e.registeredTarget) {
            if (target._controlData) {
                return;
            }
            target = target.parentNode;
        }
    
        // Raise window.
        this.component.parent.peer.raise(this.component);
        
        // Prevent selections.
        Core.Web.dragInProgress = true;
        Core.Web.DOM.preventEventDefault(e);
        this._overlayAdd();
    
        this._loadContainerSize();
        this._dragInit = { x: this._rendered.x, y: this._rendered.y };
        this._dragOrigin = { x: e.clientX, y: e.clientY };
    
        Core.Web.Event.add(document.body, "mousemove", this._processTitleBarMouseMoveRef, true);
        Core.Web.Event.add(document.body, "mouseup", this._processTitleBarMouseUpRef, true);
    },
    
    /**
     * Processes a mouse move event on the window title bar (move drag).
     */
    _processTitleBarMouseMove: function(e) {
        this._setBounds({
            x: this._dragInit.x + e.clientX - this._dragOrigin.x, 
            y: this._dragInit.y + e.clientY - this._dragOrigin.y
        }, true);
    },
    
    /**
     * Processes a mouse up event on the window title bar (move drag).
     */
    _processTitleBarMouseUp: function(e) {
        Core.Web.dragInProgress = false;
        this._overlayRemove();
    
        this._removeTitleBarListeners();
    
        this.component.set("positionX", this._rendered.x);
        this.component.set("positionY", this._rendered.y);
    
        this._requested.x = this._rendered.x;
        this._requested.y = this._rendered.y;
    },
    
    /**
     * Repositions and resizes the window based on the current bounds specified in this._rendered.
     * Performs no operation if this._rendered does not have width/height data.
     */
    _redraw: function() {
        if (this._rendered.width <= 0 || this._rendered.height <= 0) {
            // Do not render if window does not have set dimensions.
            return;
        }
        
        var borderSideWidth = this._rendered.width - this._borderInsets.left - this._borderInsets.right;
        var borderSideHeight = this._rendered.height - this._borderInsets.top - this._borderInsets.bottom;
    
        this._div.style.left = this._rendered.x + "px";
        this._div.style.top = this._rendered.y + "px";
        this._div.style.width = this._rendered.width + "px";
        this._div.style.height = this._rendered.height + "px";
    
        this._titleBarDiv.style.width = (this._rendered.width - this._contentInsets.left - this._contentInsets.right) + "px";
        
        if (this._borderDivs[1]) {
            this._borderDivs[1].style.width = borderSideWidth + "px";
        }
        if (this._borderDivs[6]) {
            this._borderDivs[6].style.width = borderSideWidth + "px";
        }
        if (this._borderDivs[3]) {
            this._borderDivs[3].style.height = borderSideHeight + "px";
        }
        if (this._borderDivs[4]) {
            this._borderDivs[4].style.height = borderSideHeight + "px";   
        }
        
        Core.Web.VirtualPosition.redraw(this._contentDiv);
        Core.Web.VirtualPosition.redraw(this._maskDiv);
    },
    
    /**
     * Removes mouseup/mousemove listeners from border.  Invoked after resize drag has completed/on dispose.
     */
    _removeBorderListeners: function() {
        Core.Web.Event.remove(document.body, "mousemove", this._processBorderMouseMoveRef, true);
        Core.Web.Event.remove(document.body, "mouseup", this._processBorderMouseUpRef, true);
    },
    
    /**
     * Removes mouseup/mousemove listeners from title bar.  Invoked after move drag has completed/on dispose.
     */
    _removeTitleBarListeners: function() {
        Core.Web.Event.remove(document.body, "mousemove", this._processTitleBarMouseMoveRef, true);
        Core.Web.Event.remove(document.body, "mouseup", this._processTitleBarMouseUpRef, true);
    },
    
    /** @see Echo.Render.ComponentSync#renderAdd */
    renderAdd: function(update, parentElement) {
        // Create main component DIV.
        this._div = document.createElement("div");
        this._div.id = this.component.renderId;
        this._div.tabIndex = "0";
        
        this._rtl = !this.component.getRenderLayoutDirection().isLeftToRight();
        
        // Create content DIV.
        // Content DIV will be appended to main DIV by _renderAddFrame().
        this._contentDiv = document.createElement("div");

        // Render child component, add to content DIV.
        var componentCount = this.component.getComponentCount();
        if (componentCount == 1) {
            Echo.Render.renderComponentAdd(update, this.component.getComponent(0), this._contentDiv);
        } else if (componentCount > 1) {
            throw new Error("Too many children: " + componentCount);
        }
    
        // Render Internet Explorer 6-specific windowed control-blocking IFRAME ("mask DIV").
        // Mask DIV will be added to main DIV by _renderAddFrame().
        if (Core.Web.Env.QUIRK_IE_SELECT_Z_INDEX) {
            // Render Select Field Masking Transparent IFRAME.
            this._maskDiv = document.createElement("div");
            this._maskDiv.style.cssText = 
                    "filter:alpha(opacity=0);z-index:1;position:absolute;left:0,right:0,top:0,bottom:0,borderWidth:0;";
            var maskIFrameElement = document.createElement("iframe");
            maskIFrameElement.style.cssText = "width:100%;height:100%;";
            maskIFrameElement.src = this.client.getResourceUrl("Echo", "resource/Blank.html");
            this._maskDiv.appendChild(maskIFrameElement);
        }
    
        // Render window frame.
        this._renderAddFrame();
        
        Echo.Sync.LayoutDirection.render(this.component.getLayoutDirection(), this._div);
    
        // Append main DIV to parent.
        parentElement.appendChild(this._div);
    },
    
    /**
     * Renders the frame of the window.  Does not alter window content.  This method may be invoked after the window has 
     * initially been rendered to update the window content.
     * _renderDisposeFrame() must be invoked between invocations of _renderAddFrame() to dispose resources.
     * _contentDiv will be appended to rendered DOM structure.
     */
    _renderAddFrame: function() {
        this._loadPositionAndSize();

        // Load property states.
        this._minimumWidth = Echo.Sync.Extent.toPixels(
                this.component.render("minimumWidth", Echo.WindowPane.DEFAULT_MINIMUM_WIDTH), true);
        this._minimumHeight = Echo.Sync.Extent.toPixels(
                this.component.render("minimumHeight", Echo.WindowPane.DEFAULT_MINIMUM_HEIGHT), false);
        this._maximumWidth = Echo.Sync.Extent.toPixels(this.component.render("maximumWidth"), true);
        this._maximumHeight = Echo.Sync.Extent.toPixels(this.component.render("maximumHeight"), false);
        var border = this.component.render("border", Echo.WindowPane.DEFAULT_BORDER);
        this._borderInsets = Echo.Sync.Insets.toPixels(border.borderInsets);
        this._contentInsets = Echo.Sync.Insets.toPixels(border.contentInsets);
        var movable = this.component.render("movable", true);
        var resizable = this.component.render("resizable", true);
        var closable = this.component.render("closable", true);
        var maximizeEnabled = this.component.render("maximizeEnabled", false);
        var minimizeEnabled = this.component.render("minimizeEnabled", false);
        var hasControlIcons = closable || maximizeEnabled || minimizeEnabled;
        var fillImageFlags = this.component.render("ieAlphaRenderBorder") ? Echo.Sync.FillImage.FLAG_ENABLE_IE_PNG_ALPHA_FILTER : 0;
        
        this._div.style.cssText = "outline-style:none;position:absolute;z-index:1;overflow:hidden;";
        
        this._borderDivs = [];
        
        var borderBaseCss = "z-index:2;font-size:1px;position:absolute;";
        // Render top row
        if (this._borderInsets.top > 0) {
            // Render top left corner
            if (this._borderInsets.left > 0) {
                this._borderDivs[0] = document.createElement("div");
                this._borderDivs[0].style.cssText = borderBaseCss + "left:0;top:0;" +
                        "width:" + this._borderInsets.left + "px;height:" + this._borderInsets.top + "px;";
            }
            
            // Render top side
            this._borderDivs[1] = document.createElement("div");
            this._borderDivs[1].style.cssText = borderBaseCss + "top:0;" +
                    "left:" + this._borderInsets.left + "px;height:" + this._borderInsets.top + "px;";
    
            // Render top right corner
            if (this._borderInsets.right > 0) {
                this._borderDivs[2] = document.createElement("div");
                this._borderDivs[2].style.cssText = borderBaseCss + "right:0;top:0;" +
                        "width:" + this._borderInsets.right + "px;height:" + this._borderInsets.top + "px;";
            }
        }
    
        // Render left side
        if (this._borderInsets.left > 0) {
            this._borderDivs[3] = document.createElement("div");
            this._borderDivs[3].style.cssText = borderBaseCss + "left:0;" +
                    "top:" + this._borderInsets.top + "px;width:" + this._borderInsets.left + "px;";
        }
        
        // Render right side
        if (this._borderInsets.right > 0) {
            this._borderDivs[4] = document.createElement("div");
            this._borderDivs[4].style.cssText = borderBaseCss + "right:0;" +
                    "top:" + this._borderInsets.top + "px;width:" + this._borderInsets.right + "px;";
        }
        
        // Render bottom row
        if (this._borderInsets.bottom > 0) {
            // Render bottom left corner
            if (this._borderInsets.left > 0) {
                this._borderDivs[5] = document.createElement("div");
                this._borderDivs[5].style.cssText = borderBaseCss + "left:0;bottom:0;" +
                        "width:" + this._borderInsets.left + "px;height:" + this._borderInsets.bottom + "px;";
            }
            
            // Render bottom side
            this._borderDivs[6] = document.createElement("div");
            this._borderDivs[6].style.cssText = borderBaseCss + "bottom:0;" +
                    "left:" + this._borderInsets.left + "px;height:" + this._borderInsets.bottom + "px;";
    
            // Render bottom right corner
            if (this._borderInsets.right > 0) {
                this._borderDivs[7] = document.createElement("div");
                this._borderDivs[7].style.cssText = borderBaseCss + "right:0;bottom:0;" +
                        "width:" + this._borderInsets.right + "px;height:" + this._borderInsets.bottom + "px;";
            }
        }
        
        for (var i = 0; i < 8; ++i) {
            if (this._borderDivs[i]) {
                if (border.color != null) {
                    this._borderDivs[i].style.backgroundColor = border.color;
                }
                if (resizable) {
                    this._borderDivs[i].style.cursor = Echo.Sync.WindowPane.CURSORS[i];
                    Core.Web.Event.add(this._borderDivs[i], "mousedown", 
                            Core.method(this, this._processBorderMouseDown), true);
                }
                var borderImage = border[Echo.Sync.WindowPane.FIB_POSITIONS[i]];
                if (borderImage) {
                    Echo.Sync.FillImage.render(borderImage, this._borderDivs[i], fillImageFlags);
                }
                this._div.appendChild(this._borderDivs[i]);
            }
        }
        
        // Render Title Bar
        
        this._titleBarDiv = document.createElement("div");
        this._titleBarDiv.style.position = "absolute";
        this._titleBarDiv.style.zIndex = 3;
        
        var icon = this.component.render("icon");