render.grid.js

一个ajax富客户端的ajax类库

                this.gridXSize = parseInt(this.grid.render("size", 2));
                var x = 0, y = 0;
                var yCells = this._getCellArray(y);
                
                for (var componentIndex = 0; componentIndex < cells.length; ++componentIndex) {
                    
                    // Set x-span to fill remaining size in the event SPAN_FILL has been specified or if the cell would
                    // otherwise extend past the specified size.
                    if (cells[componentIndex].xSpan == EchoApp.Grid.SPAN_FILL || cells[componentIndex].xSpan > this.gridXSize - x) {
                        cells[componentIndex].xSpan = this.gridXSize - x;
                    }
                    
                    // Set x-span of any cell INCORRECTLY set to negative value to 1 (note that SPAN_FILL has already been handled).
                    if (cells[componentIndex].xSpan < 1) {
                        cells[componentIndex].xSpan = 1;
                    }
                    // Set y-span of any cell INCORRECTLY set to negative value (or more likely SPAN_FILL) to 1.
                    if (cells[componentIndex].ySpan < 1) {
                        cells[componentIndex].ySpan = 1;
                    }
                    
                    if (cells[componentIndex].xSpan != 1 || cells[componentIndex].ySpan != 1) {
                        // Scan to ensure no y-spans are blocking this x-span.
                        // If a y-span is blocking, shorten the x-span to not
                        // interfere.
                        for (var xIndex = 1; xIndex < cells[componentIndex].xSpan; ++xIndex) {
                            if (yCells[x + xIndex] != null) {
                                // Blocking component found.
                                cells[componentIndex].xSpan = xIndex;
                                break;
                            }
                        }
                        for (var yIndex = 0; yIndex < cells[componentIndex].ySpan; ++yIndex) {
                            var yIndexCells = this._getCellArray(y + yIndex);
                            for (var xIndex = 0; xIndex < cells[componentIndex].xSpan; ++xIndex) {
                                yIndexCells[x + xIndex] = cells[componentIndex];
                            }
                        }
                    }
                    yCells[x] = cells[componentIndex];
            
                    if (componentIndex < cells.length - 1) {
                        // Move rendering cursor.
                        var nextRenderPointFound = false;
                        while (!nextRenderPointFound) {
                            if (x < this.gridXSize - 1) {
                                ++x;
                            } else {
                                // Move cursor to next line.
                                x = 0;
                                ++y;
                                yCells = this._getCellArray(y);
                                
                            }
                            nextRenderPointFound = yCells[x] == null;
                        }
                    }
                }
            
                // Store actual 'y' dimension.
                this.gridYSize = this.cellArrays.length;
            }
        })
    },
    
    $load: function() {
        this._prototypeTable = this._createPrototypeTable();
        EchoRender.registerPeer("Grid", this);
    },
    
    _columnCount: null,
    
    _rowCount: null,
    
    _processKeyPress: function(e) { 
        switch (e.keyCode) {
        case 37:
        case 39:
            var focusPrevious = e.keyCode == 37;
            var focusedComponent = this.component.application.getFocusedComponent();
            if (focusedComponent && focusedComponent.peer && focusedComponent.peer.getFocusFlags) {
                var focusFlags = focusedComponent.peer.getFocusFlags();
                if ((focusPrevious && focusFlags & EchoRender.ComponentSync.FOCUS_PERMIT_ARROW_LEFT)
                        || (!focusPrevious && focusFlags & EchoRender.ComponentSync.FOCUS_PERMIT_ARROW_RIGHT)) {
                    var focusChild = this.component.application.focusManager.findInParent(this.component, focusPrevious);
                    if (focusChild) {
                        this.component.application.setFocusedComponent(focusChild);
                        WebCore.DOM.preventEventDefault(e);
                        return false;
                    }
                }
            }
            break;
        case 38:
        case 40:
            var focusPrevious = e.keyCode == 38;
            var focusedComponent = this.component.application.getFocusedComponent();
            if (focusedComponent && focusedComponent.peer && focusedComponent.peer.getFocusFlags) {
                var focusFlags = focusedComponent.peer.getFocusFlags();
                if ((focusPrevious && focusFlags & EchoRender.ComponentSync.FOCUS_PERMIT_ARROW_UP)
                        || (!focusPrevious && focusFlags & EchoRender.ComponentSync.FOCUS_PERMIT_ARROW_DOWN)) {
                    var focusChild = this.component.application.focusManager.findInParent(this.component, focusPrevious,
                            this._columnCount);
                    if (focusChild) {
                        this.component.application.setFocusedComponent(focusChild);
                        WebCore.DOM.preventEventDefault(e);
                        return false;
                    }
                }
            }
            break;
        }
        return true;
    },

    renderAdd: function(update, parentElement) {
        var gridProcessor = new EchoAppRender.GridSync.Processor(this.component);
        
        this._columnCount = gridProcessor.getColumnCount();
        this._rowCount = gridProcessor.getRowCount();
        
        var defaultInsets = this.component.render("insets", "0");
        var defaultBorder = this.component.render("border", "");
    
        this._tableElement = EchoAppRender.GridSync._prototypeTable.cloneNode(true);
        this._tableElement.id = this.component.renderId;
        
        EchoAppRender.Color.renderFB(this.component, this._tableElement);
        EchoAppRender.Border.render(defaultBorder, this._tableElement);
        EchoAppRender.Font.render(this.component.render("font"), this._tableElement);
        EchoAppRender.Insets.render(this.component.render("insets"), this._tableElement, "padding");
    
        var width = this.component.render("width");
        
        if (width && WebCore.Environment.QUIRK_IE_TABLE_PERCENT_WIDTH_SCROLLBAR_ERROR && EchoAppRender.Extent.isPercent(width)) {
            this._renderPercentWidthByMeasure = parseInt(width);
            width = null;
        }
        
        if (width) {
            if (EchoAppRender.Extent.isPercent(width)) {
                this._tableElement.style.width = width;
            } else {
                this._tableElement.style.width = EchoAppRender.Extent.toCssValue(width, true);
            }
        }
        
        var height = this.component.render("height");
        if (height) {
            if (EchoAppRender.Extent.isPercent(height)) {
                this._tableElement.style.height = height;
            } else {
                this._tableElement.style.height = EchoAppRender.Extent.toCssValue(height, false);
            }
        }
        
        var colGroupElement = this._tableElement.firstChild;
        for (var columnIndex = 0; columnIndex < this._columnCount; ++columnIndex) {
            var colElement = document.createElement("col");
            var width = gridProcessor.xExtents[columnIndex];
            if (width != null) {
                if (EchoAppRender.Extent.isPercent(width)) {
                    colElement.width = width.toString();
                } else {
                    colElement.width = EchoAppRender.Extent.toCssValue(width, true);
                }
            }
            colGroupElement.appendChild(colElement);
        }
        
        var tbodyElement = colGroupElement.nextSibling;
        
        var size = parseInt(this.component.render("size", 2));
        
        var trElement;
        var height;
        var renderedComponentIds = {};
        
        var xSpan, ySpan;
        if (gridProcessor.horizontalOrientation) {
            xSpan = "colSpan";
            ySpan = "rowSpan"; 
        } else {
            xSpan = "rowSpan";
            ySpan = "colSpan"; 
        }
        
        var tdPrototype = document.createElement("td");
        EchoAppRender.Border.render(defaultBorder, tdPrototype);
        tdPrototype.style.padding = defaultInsets.toString();
        tdPrototype.style.overflow = "hidden";
        
        for (var rowIndex = 0; rowIndex < this._rowCount; ++rowIndex) {
            trElement = document.createElement("tr");
            height = gridProcessor.yExtents[rowIndex];
            if (height) {
                trElement.style.height = EchoAppRender.Extent.toCssValue(height, false);
            }
            tbodyElement.appendChild(trElement);
            
            for (var columnIndex = 0; columnIndex < this._columnCount; ++columnIndex) {
                var cell = gridProcessor.getCell(columnIndex, rowIndex);
                if (cell == null) {
                    var tdElement = document.createElement("td");
                    trElement.appendChild(tdElement);
                    continue;
                }
                if (renderedComponentIds[cell.component.renderId]) {
                    // Cell already rendered.
                    continue;
                }
                renderedComponentIds[cell.component.renderId] = true;
                
                var tdElement = tdPrototype.cloneNode(false);
                
                if (cell.xSpan > 1) {
                    tdElement.setAttribute(xSpan, cell.xSpan);
                }
                if (cell.ySpan > 1) {
                    tdElement.setAttribute(ySpan, cell.ySpan);
                }
                
                var layoutData = cell.component.render("layoutData");
                if (layoutData) {
                    EchoAppRender.Insets.render(layoutData.insets, tdElement, "padding");
                    EchoAppRender.Alignment.render(layoutData.alignment, tdElement, true, this.component);
                    EchoAppRender.FillImage.render(layoutData.backgroundImage, tdElement);
                    EchoAppRender.Color.render(layoutData.background, tdElement, "backgroundColor");
                }
                
                EchoRender.renderComponentAdd(update, cell.component, tdElement);
    
                trElement.appendChild(tdElement);
            }
        }
        
        WebCore.EventProcessor.add(this._tableElement, 
                WebCore.Environment.QUIRK_IE_KEY_DOWN_EVENT_REPEAT ? "keydown" : "keypress",
                Core.method(this, this._processKeyPress), false);

        parentElement.appendChild(this._tableElement);
    },
    
    renderDispose: function(update) {
        WebCore.EventProcessor.removeAll(this._tableElement);
        this._tableElement = null;
    },
    
    renderDisplay: function() {
        if (this._renderPercentWidthByMeasure) {
            this._tableElement.style.width = "";
            var percentWidth = (this._tableElement.parentNode.offsetWidth * this._renderPercentWidthByMeasure) / 100;
            this._tableElement.style.width = percentWidth + "px";
        }
    },
    
    renderUpdate: function(update) {
        var element = this._tableElement;
        var containerElement = element.parentNode;
        EchoRender.renderComponentDispose(update, update.parent);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
        return true;
    }
});