render.list.js

一个ajax富客户端的ajax类库

                this._divElement, "backgroundColor");
        EchoAppRender.Font.render(
                EchoAppRender.getEffectProperty(this.component, "font", "disabledFont", !this._enabled), 
                this._divElement);
        EchoAppRender.Insets.render(this.component.render("insets"), this._divElement, "padding");

        var items = this.component.get("items");
        if (items) {
            for (var i = 0; i < items.length; ++i) {
                var optionElement = document.createElement("div");
                if (items[i].text) {
                    optionElement.appendChild(document.createTextNode(items[i].text));
                } else {
                    optionElement.appendChild(document.createTextNode(items[i].toString()));
                }
                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._divElement.appendChild(optionElement);
            }
        }
        
        if (this._enabled) {
            WebCore.EventProcessor.add(this._divElement, "click", Core.method(this, this._processClick), false);
            WebCore.EventProcessor.add(this._divElement, "selectstart", Core.method(this, this._processSelectStart), false);
        }
        
        parentElement.appendChild(this._mainElement);
    },
    
    /**
     * Delegates to _renderMainAsSelect() or _renderMainAsDiv() depending on type of list selection component and browser bugs.
     */
    _renderMain: function(update, parentElement, size) {
        this._multipleSelect = this.component.get("selectionMode") == EchoApp.ListBox.MULTIPLE_SELECTION;
        if (this.component instanceof EchoApp.ListBox && WebCore.Environment.QUIRK_IE_SELECT_LIST_DOM_UPDATE) {
            this._alternateRender = true;
        }
        this._enabled = this.component.isRenderEnabled();
        
        if (this._alternateRender) {
            this._renderMainAsDiv(update, parentElement, size);
        } else {
            this._renderMainAsSelect(update, parentElement, size);
        }
    },
    
    renderDisplay: function() {
        this._renderSelection();
    },
    
    renderDispose: function(update) { 
        WebCore.EventProcessor.removeAll(this._mainElement);
        this._mainElement = null;
        if (this._divElement) {
            WebCore.EventProcessor.removeAll(this._divElement);
            this._divElement = null;
        }
    },
    
    _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;
                    }
                }
            }
            
            // If selection is null (selectedId not set, or not corresponding item not found),
            // set selection to null/default value.
            if (selection == null) {
                selection = this._multipleSelect ? [] : 0;
            }
        }
        
        return selection;
    },
    
    _renderSelection: function() {
        // Set selection.
        var selection = this._getSelection();
        
        if (this._alternateRender) {
            if (this._hasRenderedSelectedItems) {
                var items = this.component.get("items");
                for (var i = 0; i < items.length; ++i) {
                    EchoAppRender.Color.renderClear(items[i].foreground, this._divElement.childNodes[i], 
                            "color");
                    EchoAppRender.Color.renderClear(items[i].background, this._divElement.childNodes[i], 
                            "backgroundColor");
                }
            }
            if (selection instanceof Array) {
                for (var i = 0; i < selection.length; ++i) {
                    if (selection[i] >= 0 && selection[i] < this._divElement.childNodes.length) {
                        EchoAppRender.Color.render(EchoAppRender.ListComponentSync.DEFAULT_SELECTED_FOREGROUND,
                                this._divElement.childNodes[selection[i]], "color");
                        EchoAppRender.Color.render(EchoAppRender.ListComponentSync.DEFAULT_SELECTED_BACKGROUND,
                                this._divElement.childNodes[selection[i]], "backgroundColor");
                    }
                }
            } else if (selection >= 0 && selection < this._divElement.childNodes.length) {
                EchoAppRender.Color.render(EchoAppRender.ListComponentSync.DEFAULT_SELECTED_FOREGROUND,
                        this._divElement.childNodes[selection], "color");
                EchoAppRender.Color.render(EchoAppRender.ListComponentSync.DEFAULT_SELECTED_BACKGROUND,
                        this._divElement.childNodes[selection], "backgroundColor");
            }
        } else {
            if (this._hasRenderedSelectedItems) {
                this._mainElement.selectedIndex = -1;
            }
            if (selection instanceof Array) {
                for (var i = 0; i < selection.length; ++i) {
                    if (selection[i] >= 0 && selection[i] < this._mainElement.options.length) {
                        this._mainElement.options[selection[i]].selected = true;
                    }
                }
            } else if (selection >= 0 && selection < this._mainElement.options.length) {
                this._mainElement.options[selection].selected = true;
            }
        }
        this._hasRenderedSelectedItems = true;
    },
    
    renderUpdate: function(update) {
        if (update.getUpdatedProperty("selectedId") && !update.getUpdatedProperty("selection")) {
            this._selectedIdPriority = true;
        }
    
        var element = this._mainElement;
        var containerElement = element.parentNode;
        this.renderDispose(update);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
        return false; // Child elements not supported: safe to return false.
    },
    
    _setSelection: function(selection) {
        this._selectedIdPriority = false;
    
        var selectedId = null;
        
        if (selection instanceof Array && selection.length == 1) {
            selection = selection[0];
        }
        
        var items = this.component.get("items");
        if (selection instanceof Array) {
            selectedId = [];
            for (var i = 0; i < selection.length; ++i) {
                var selectedIndex = selection[i];
                if (selectedIndex < items.length) {
                    if (items[selectedIndex].id != null) {
                        selectedId.push(items[selectedIndex].id);
                    }
                }
            }
        } else {
            if (selection < items.length) {
                if (items[selection].id != null) {
                    selectedId = items[selection].id;
                }
            }
        }

        this.component.set("selection", selection);
        this.component.set("selectedId", selectedId);
    }
});

/**
 * Component rendering peer: ListBox
 */
EchoAppRender.ListBoxSync = Core.extend(EchoAppRender.ListComponentSync, {

    $load: function() {
        EchoRender.registerPeer("ListBox", this);
    },

    renderAdd: function(update, parentElement) {
        this._renderMain(update, parentElement, 6);
    }
});

/**
 * Component rendering peer: SelectField
 */
EchoAppRender.SelectFieldSync = Core.extend(EchoAppRender.ListComponentSync, { 

    $load: function() {
        EchoRender.registerPeer("SelectField", this);
    },
    
    renderAdd: function(update, parentElement) {
        this._renderMain(update, parentElement, 0);
    }
});