render.list.js

一个ajax富客户端的ajax类库

/**
 * Abstract base class for SELECT-element based list components.
 */
EchoAppRender.ListComponentSync = Core.extend(EchoRender.ComponentSync, {

    $static: {
        DEFAULT_DIV_HEIGHT: "6em",
        DEFAULT_DIV_BORDER: "1px solid",
        DEFAULT_SELECTED_BACKGROUND: "#0a246a",
        DEFAULT_SELECTED_FOREGROUND: "#ffffff"
    },

    $abstract: true,

    _hasRenderedSelectedItems: false,
    
    _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.
     */
    _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.
     */
    _alternateRender: false,
    
    _mainElement: null,
    
    _divElement: null,
    
    /**
     * 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.verifyInput(this.component)) {
            WebCore.DOM.preventEventDefault(e);
            this._renderSelection();
            return;
        }
        
        var child = this._divElement.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 = [];
            }
            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();
    },
    
    /**
     * This event handler is registered only for traditional SELECT elements, i.e., the _alternateRender flag will be false.
     */
    _processChange: function(e) {
        if (!this.client.verifyInput(this.component)) {
            WebCore.DOM.preventEventDefault(e);
            this._renderSelection();
            return;
        }
        
        var selection;
        if (this._multipleSelect) {
            selection = [];
            for (var i = 0; i < this._mainElement.options.length; ++i) {
                if (this._mainElement.options[i].selected) {
                    selection.push(i);
                }
            }
        } else {
            if (this._mainElement.selectedIndex != -1) {
                selection = this._mainElement.selectedIndex;
            }
        }
    
        this._setSelection(selection);
        this.component.doAction();
    },
    
    /**
     * IE-specific event handler to prevent mouse-selection of text in DOM-rendered listbox component.
     */
    _processSelectStart: function(e) {
        WebCore.DOM.preventEventDefault(e);
    },

    /**
     * Renders the list selection component as a standard SELECT element.
     * This strategy is always used in all browsers except IE6, and is used in IE6
     * for drop-down select fields.  IE6 cannot use this strategy for listboxes
     * do to major bugs in this browser (listboxes randomly change back into selectfields
     * when rendered by DOM manipulation).
     * This strategy is used when the _alternateRender flag is false.
     */
    _renderMainAsSelect: function(update, parentElement, size) {
        this._mainElement = document.createElement("select");
        this._mainElement.id = this.component.renderId;
        this._mainElement.size = size;

        if (!this._enabled) {
            this._mainElement.disabled = true;
        }
        if (this._multipleSelect) {
            this._mainElement.multiple = "multiple";
        }

        EchoAppRender.Border.render(
                EchoAppRender.getEffectProperty(this.component, "border", "disabledBorder", !this._enabled), 
                this._mainElement);
        EchoAppRender.Color.render(
                EchoAppRender.getEffectProperty(this.component, "foreground", "disabledForeground", !this._enabled), 
                this._mainElement, "color");
        EchoAppRender.Color.render(
                EchoAppRender.getEffectProperty(this.component, "background", "disabledBackground", !this._enabled), 
                this._mainElement, "backgroundColor");
        EchoAppRender.Font.render(
                EchoAppRender.getEffectProperty(this.component, "font", "disabledFont", !this._enabled), 
                this._mainElement);
        EchoAppRender.Insets.render(this.component.render("insets"), this._mainElement, "padding");

        var items = this.component.get("items");
        if (items) {
            for (var i = 0; i < items.length; ++i) {
                var optionElement = document.createElement("option");
                if (items[i].text == null) {
                    optionElement.appendChild(document.createTextNode(items[i].toString()));
                } else {
                    optionElement.appendChild(document.createTextNode(items[i].text));
                }
                if (items[i].foreground) {
                    EchoAppRender.Color.render(items[i].foreground, optionElement, "color");
                }
                if (items[i].background) {
                    EchoAppRender.Color.render(items[i].background, optionElement, "backgroundColor");
                }
                if (items[i].font) {
                    EchoAppRender.Font.render(items[i].font, optionElement);
                }
                this._mainElement.appendChild(optionElement);
            }
        }
    
        if (this._enabled) {
            WebCore.EventProcessor.add(this._mainElement, "change", Core.method(this, this._processChange), false);
        }

        parentElement.appendChild(this._mainElement);
    },

    /**
     * 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.
     */
    _renderMainAsDiv: function(update, parentElement, size) {
        this._mainElement = document.createElement("table");
        this._mainElement.id = this.component.renderId;
        
        var tbodyElement = document.createElement("tbody");
        this._mainElement.appendChild(tbodyElement);
        var trElement = document.createElement("tr");
        tbodyElement.appendChild(trElement);
        var tdElement = document.createElement("td");
        trElement.appendChild(tdElement);
        
        this._divElement = document.createElement("div");
        tdElement.appendChild(this._divElement);
        
        this._divElement.style.cssText = "cursor:default;overflow:auto;";
        
        //FIXME        
        this._divElement.style.height = "6em";
        
        EchoAppRender.Border.render(
                EchoAppRender.getEffectProperty(this.component, "border", "disabledBorder", !this._enabled, 
                EchoAppRender.ListComponentSync.DEFAULT_DIV_BORDER, EchoAppRender.ListComponentSync.DEFAULT_DIV_BORDER), 
                this._divElement);
        EchoAppRender.Color.render(
                EchoAppRender.getEffectProperty(this.component, "foreground", "disabledForeground", !this._enabled), 
                this._divElement, "color");
        EchoAppRender.Color.render(
                EchoAppRender.getEffectProperty(this.component, "background", "disabledBackground", !this._enabled),