sync.list.js

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

/**
 * Abstract base class for rendering SELECT-element based list components.
 */
Echo.Sync.ListComponent = Core.extend(Echo.Render.ComponentSync, {

    $static: {
    
        /** 
         * Alternate rendering: default border style.
         * @type #Border
         */
        DEFAULT_DIV_BORDER: "1px solid #7f7f7f",
        
        /** 
         * Alternate rendering: default selected item background.
         * @type #Color
         */
        DEFAULT_SELECTED_BACKGROUND: "#0a246a",
        
        /** 
         * Alternate rendering: default selected item foreground.
         * @type #Color
         */
        DEFAULT_SELECTED_FOREGROUND: "#ffffff"
    },

    $abstract: {
        
        /**
         * Flag indicating whether the component should be rendered as a list box (true) or select field (false).
         * @type Boolean
         */
        listBox: null
    },
    
    /**
     * Flag indicating that one or more of the items in the list component has been rendered with a selected appearance.
     * @type Boolean
     */
    _hasRenderedSelectedItems: false,
    
    /**
     * Flag indicating whether multiple selection is allowed (for listboxes).
     * @type Boolean
     */
    _multipleSelect: false,
    
    /**
     * Flag indicating that selection should be determined based on "selectedId"
     * property rather than "selection" property.  This flag is enabled when
     * "selectedId" is updated and disabled when an item is selected by the user.
     * @type Boolean
     */
    _selectedIdPriority: false,

    /**
     * Flag indicating that component will be rendered as a DHTML-based ListBox.
     * This form of rendering is necessary on Internet Explorer 6 browsers due to unstable
     * code in this web browser when using listbox-style SELECT elements.
     * @type Boolean
     */
    _alternateRender: false,
    
    /**
     * The "main" element upon which contains items and upon which listeners are registered.  
     * For normal rendering, this is the SELECT, which directly contains individual OPTION elements.
     * For the alternate rendering, this is the TABLE, whose TBODY element contains individual
     * TR elements that represent options.
     * @type Element
     */
    _element: null,
    
    /**
     * Rendered DIV element when alternate listbox rendering is enabled.
     * Null if list is rendered as a SELECT element.
     * @type Element.
     */
    _div: null,
    
    /**
     * Rendered focus state of component, based on received DOM focus/blur events.
     * @type Boolean
     */
    _focused: false,
    
    /**
     * Determines current selection state.
     * By default, the value of the "selection" property of the component is returned.
     * If the _selectedIdPriorirty flag is set, or if the "selection" property has no value,
     * then selection is determined based on the "selectedId" property of the component.
     * 
     * @return the selection, either an integer index or array of indices
     */
    _getSelection: function() {
        // Retrieve selection from "selection" property.
        var selection = this._selectedIdPriority ? null : this.component.get("selection");
        
        if (selection == null) {
            // If selection is now in "selection" property, query "selectedId" property.
            var selectedId = this.component.get("selectedId");

            if (selectedId) {
                // If selectedId property is set, find item with corresponding id.
                var items = this.component.get("items");

                for (var i = 0; i < items.length; ++i) {
                    if (items[i].id == selectedId) {
                        selection = i;
                        break;
                    }
                }
            }
            
            // If selection is null (selectedId not set, or corresponding item not found),
            // set selection to null/default value.
            if (selection == null) {
                selection = this.listBox ? [] : 0;
            }
        }
        
        return selection;
    },
    
    /** Processes a focus blur event */
    _processBlur: function(e) {
        this._focused = false;
    },
    
    /**
     * Processes a click event.
     * This event handler is registered only in the case of the "alternate" DHTML-based rendered
     * listbox for IE6, i.e., the _alternateRender flag will be true. 
     */
    _processClick: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            Core.Web.DOM.preventEventDefault(e);
            this._renderSelection();
            return true;
        }
        
        var child = this._div.firstChild;
        var i = 0;
        while (child) {
            if (child == e.target) {
                break;
            }
            child = child.nextSibling;
            ++i;
        }
        if (child == null) {
            return;
        }
        
        if (this._multipleSelect && e.ctrlKey) {
            // Multiple selection and user has pressed ctrl key to select multiple items.
            var selection = this._getSelection();
            if (selection == null) {
                selection = [];
            } else if (typeof (selection) == "number") {
                selection = [selection];
            }
            var arrayIndex = Core.Arrays.indexOf(selection, i); 
            if (arrayIndex == -1) {
                // Add item to selection if not present.
                selection.push(i);
            } else {
                // Remove item from selection if already present.
                selection.splice(arrayIndex, 1);
            }
        } else {
            selection = i;
        }
        
        this._setSelection(selection);
        this.component.doAction();
        this._renderSelection();
    },
    
    /**
     * Processes a selection change event.
     * This event handler is registered only for traditional SELECT elements, i.e., the _alternateRender flag will be false.
     */
    _processChange: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            Core.Web.DOM.preventEventDefault(e);
            this._renderSelection();
            return false;
        }
        
        var selection;
        if (this._multipleSelect) {
            selection = [];
            for (var i = 0; i < this._element.options.length; ++i) {
                if (this._element.options[i].selected) {
                    selection.push(i);
                }
            }
        } else {
            if (this._element.selectedIndex != -1) {
                selection = this._element.selectedIndex;
            }
        }
    
        this._setSelection(selection);
        this.component.doAction();
    },
    
    /** Processes a focus event */
    _processFocus: function(e) {
        this._focused = true;
        if (!this.client || !this.client.verifyInput(this.component)) {
            return true;
        }
        this.client.application.setFocusedComponent(this.component);
    },
    
    /** IE-specific event handler to prevent mouse-selection of text in DOM-rendered listbox component. */
    _processSelectStart: function(e) {
        Core.Web.DOM.preventEventDefault(e);
    },

    /** @see Echo.Render.ComponentSync#renderAdd */
    renderAdd: function(update, parentElement) {
        this._multipleSelect = this.component.get("selectionMode") == Echo.ListBox.MULTIPLE_SELECTION;
        if (this.listBox && Core.Web.Env.QUIRK_IE_SELECT_LIST_DOM_UPDATE) {
            this._alternateRender = true;
        }
        this._enabled = this.component.isRenderEnabled();
        
        if (this._alternateRender) {
            this._renderMainAsDiv(update, parentElement);
        } else {
            this._renderMainAsSelect(update, parentElement);
        }
    },

    /** @see Echo.Render.ComponentSync#renderDisplay */
    renderDisplay: function() {
        this._renderSelection();
    },
    
    /** @see Echo.Render.ComponentSync#renderDispose */
    renderDispose: function(update) { 
        Core.Web.Event.removeAll(this._element);
        this._element = null;
        if (this._div) {
            Core.Web.Event.removeAll(this._div);
            this._div = null;
        }
    },
    
    /** @see Echo.Render.ComponentSync#renderFocus */
    renderFocus: function() {
        if (this._focused) {
            return;
        }
        
        this._focused = true;
        Core.Web.DOM.focusElement(this._element);
    },
    
    /**
     * Renders a list box as a DIV element containing DIV elements of selectable items.
     * This strategy is used on IE6 due to bugs in this browser's rendering engine.
     * This strategy is used when the _alternateRender flag is true.
     * 
     * @param {Echo.Update.ComponentUpdate} update the update
     * @param {Element} parent the parent DOM element 
     */
    _renderMainAsDiv: function(update, parentElement) {
        this._element = document.createElement("table");
        this._element.id = this.component.renderId;
        
        var tbodyElement = document.createElement("tbody");
        this._element.appendChild(tbodyElement);