listgrid.js

javascript 很酷的类库

            }
            this.logWarn("After redraw - edit form covers these cols:" + itemColArray);
            */

        	
            lg.updateEditRow(lg.getEditRow());           
            
        	// If the editRowForm is currently marked as having focus, put focus into the
        	// current edit field, without firing the focus handler.
        	
            if (editForm.hasFocus) {
                this._restoreFocusAfterRedraw(editColNum);
            } else {
                delete this._editorSelection;
            }
            
        } else if (editForm != null) {      
            // notify the form that it's items have been cleared() (will no-op if they're
            // not currently drawn)
            lg._editItemsDrawingNotification(null, null, this);
        }    
    },
    
    // Add edit items corresponding to newly displayed fields (displayed due to incremental
    // rendering)
    // If any fields are to be hidden, do not remove these here, but return them in an array so
    // they can be removed from the form after the redraw completes
    // Note that the order of items in the form will not match the order of fields necessarily - 
    // acceptable since developers will be interacting with the items' colNum attribute rather than
    // index in the edit form fields array.
    
    _updateEditItems : function () {

        // We keep the set of items in the editForm in synch with the set of 
        // visible columns for performance.
        // Determine which items need to be created or removed here.
        var lg = this.grid, editForm = lg.getEditForm(),
            fieldsToRemove = [],
            editItems = editForm.getItems();
        if (!lg.editByCell) {

            // set up the vars used in creating form items
            var editRowNum = lg.getEditRow(),
                editRecord = lg.getRecord(editRowNum),
                
                completeWidths = lg.getEditFormItemFieldWidths(editRecord);
         
            // Determine what fields are rendered into the body
            // If we have frozen columns, we will always be showing them, in addition to whatever
            // fields are visible
            var editItems = editForm.getItems(),
                itemNames = editItems.getProperty(this.fieldIdProperty),
                fields = lg.getDrawnFields(),
                fieldNames = fields.getProperty(this.fieldIdProperty);
            
            // minor optimization - if possible, avoid iterating through both arrays
            var lengthsMatch = editItems.length == fields.length,
                changed = false;
                
            // fields that are no longer drawn should be removed
            for (var i = 0; i < editItems.length; i++) {
                // don't actually remove the items until they have been removed from the DOM via
                // redraw
                var index = fieldNames.indexOf(itemNames[i]);
                if (index == -1) {
                    changed = true;
                    fieldsToRemove.add(editItems[i]);
                } else {
                    // If we're keeping the item, just update width, and notify the item we're
                    // about to redraw
                    editItems[i].width = completeWidths[index];
                    editItems[i].redrawing();
                }
            }
            // newly rendered fields should be added
            if (!lengthsMatch || changed) {      
                var editedVals = lg.getEditedRecord(editRowNum, 0);
                for (var i = 0; i < fields.length; i++) {                    
                    if (!itemNames.contains(fieldNames[i])) {
                        var item = lg.getEditItem(
                                        fields[i],
                                        editRecord, editedVals, editRowNum,
                                        i, completeWidths[i]
                                   );
                        editForm.addItem(item);
                    }
                }
            }
        } 
        // if editByCell is true this is not necessary - we consistantly have the editForm contain
        // only the necessary cell
        return fieldsToRemove;
    },  

    // _storeFocusForRedraw()
    // called when the edit form is showing and the body is being redrawn.
    // remember the current focus state / selection of the edit form so we can reset it after
    // redrawing the item in the DOM
    // blur the item (suppressing the handler if the item will be refocussed after redraw) 
    _storeFocusForRedraw : function () {

        
        
        var lg = this.grid,
            editForm = lg.getEditForm(),
            editColNum = lg.getEditCol();
        if (editForm.hasFocus) {
            var focusItem = editForm.getFocusItem();      
            if (focusItem) {
                focusItem.updateValue();
                
                // We may be focussed in a sub item, in which case we need to use the
                // parentItem to get the field name wrt our fields array
                while (focusItem.parentItem != null) {
                    focusItem = focusItem.parentItem;
                }
                
                // blur the focus item before removing it from the DOM.
                // If canEditCell for the current focus item returns false, we will
                // not redisplay it at the end of this method, so allow it to fire the
                // standard blur-handler
                
                if (!lg.canEditCell(focusItem.rowNum, focusItem.colNum) ||
                    editColNum != focusItem.colNum) {
                    
                    editForm.blur();
                } else {
                    // remember the current selection, so we can reset it after the redraw
                    // and refocus. [will have no effect if the item is not a text-item]
                    focusItem.rememberSelection();
                    this._editorSelection = 
                        [focusItem._lastSelectionStart, focusItem._lastSelectionEnd]; 
                    editForm._blurFocusItemWithoutHandler();
                }
                
            }
        }
        
        editForm._setValuesPending = true;        
    },
    
    // If the editForm is visible during a body redraw() this method ensures that after the
    // redraw completes, and the form items are present in the DOM, focus / selection is restored
    // to whatever it was before the redraw
    _restoreFocusAfterRedraw : function (editColNum) {
        var lg = this.grid,
            editForm = lg.getEditForm(),
            editItem = editForm.getItem(lg.getEditorName(lg.getEditRow(), editColNum));
        if (editItem != null) {
            // Avoid selecting the focussed value - we don't want rapid keypresses
            // to kill what was previously entered  
            editForm._focusInItemWithoutHandler(editItem);
            // Reset the selection / text insertion point to whatever was 
            // remembered before the redraw.
            
            if (this._editorSelection[0] != null)
                editItem.setSelectionRange(this._editorSelection[0], this._editorSelection[1]);
        }
    },
    
	// Override isDirty to return true if the parent (ListGrid) is pending a redraw.
    isDirty : function (a,b,c) {
        return this.invokeSuper(null, "isDirty", a,b,c) || this.grid.isDirty();
    },

    // Override shouldShowRollOver to avoid styling the current edit cell with the over
    // style.
    // This avoids the issue where if you roll over the edit form items, the rollover style
    // would flash off as the body recieves a mouseout (looks very weird).        
    shouldShowRollOver : function (rowNum, colNum,a,b) {

        //if (!this.invokeSuper(null, "shouldShowRollOver", rowNum,colNum,a,b)) return false;
        
        if (!this.grid.showRollOver || this._rowAnimationInfo) return false;
 
        // don't show rollover for the edit row if editing the whole row
        var lg = this.grid;
        if (lg._editorShowing && !lg.editByCell && rowNum == lg._editRowNum) return false;

        // don't show rollover if we have an embedded component in this row
        if (this._embeddedComponents && this._embeddedComponents.length > 0) {
            var record = this.getCellRecord(rowNum, colNum);
            if (record && record._embeddedComponent) return false;
        }

        return true;
    },

    updateRollOver : function (rowNum, colNum) {
        var lg = this.grid;
        
        this.setRowStyle(rowNum, null, (this.useCellRollOvers ? colNum : null));

        // frozen fields: if there is another body, force its rollover row to match and
        // update it
        var otherBody = (this == lg.body ? lg.frozenBody : lg.body);
        if (otherBody) {
            otherBody.lastOverRow = this.lastOverRow;
            otherBody.lastOverCol = this.lastOverCol;
            otherBody.setRowStyle(rowNum, null, (this.useCellRollOvers ? colNum : null));
        }
    },
    
    
    // When refreshing cellStyle, notify our edit items that the underlying cell style changed
    // so they can update if necessary
    _updateCellStyle : function (record, rowNum, colNum, cell, className, a,b,c) {
        this.invokeSuper(isc.GridBody, "_updateCellStyle", record, rowNum,colNum,className,a,b,c);
        var lg = this.grid;        
        if (lg && lg.getEditRow() == rowNum) {
            var fieldName = lg.getFieldName(lg.getFieldNumFromLocal(colNum, this)),
                form = lg.getEditForm(),
                item = form ? form.getItem(fieldName) : null;                
            if (item && item.gridCellStyleChanged) {
                if (className == null) className = this.getCellStyle(record,rowNum,colNum);
                item.gridCellStyleChanged(record, rowNum, colNum, className);
            }
        }
        
    },
    
    
	// Override getEmptyMessageHTML to allow the body to be scrolled to view all columns
	// even when there is no data
    getEmptyMessageHTML : function (a,b,c,d) { 

        var HTML = this.invokeSuper(null, "getEmptyMessageHTML", a,b,c,d);
        
    	
    
        var diff = this.grid.getUnfrozenSlots(this.grid.getFieldWidths()).sum() - 
                        this.getWidth() + 
                        (this.grid.leaveScrollbarGap ? this.getScrollbarSize() : 0);
        if (diff > 0) {
            
            HTML = isc.StringBuffer.concat(
                "<TABLE CELLPADDING=0 CELLSPACING=0><TR><TD>", 
                HTML, "</TD><TD>", isc.Canvas.spacerHTML(diff, 1), "</TD></TR></TABLE>"
            );
        }
        return HTML;
    },

	// direct keyPresses to the ListGrid as a whole to implement arrow navigation,
	// selection, etc
	
    keyPress : function (event, eventInfo) {
        return this.grid.bodyKeyPress(event, eventInfo);
    },
    
	// Override _focusChanged to implement 'editOnFocus' - start editing the first
	// editable cell if appropriate.
	// See comments in 'editOnFocus' jsdoc comment for details of how this should work.
    _focusChanged : function (hasFocus) {
    	// use the Super implementation to set up this.hasFocus BEFORE we further 
    	// manipulate focus due to editing.
        var returnVal = this.Super("_focusChanged", arguments);
        
        if (hasFocus && this.grid.isEditable()) {      
            var parent = this.grid,
                lastEvent = isc.EH.lastEvent;                
        	// editOnFocus enabled, but not currently editing
            if (parent.editOnFocus && parent.isEditable() &&     
                parent.getEditRow() == null &&            
            	// not in the middle of a click sequence on the body, which gives the body
            	// focus, but should start editing the clicked on row
                !(lastEvent.target == this &&
                  (lastEvent.eventType == isc.EH.MOUSE_DOWN ||
                   lastEvent.eventType == isc.EH.MOUSE_UP ||
                   lastEvent.eventType == isc.EH.CLICK ||
                   lastEvent.eventType == isc.EH.DOUBLE_CLICK))
               ) 
            {
        	//this.logDebug("Editing on focus: eventType: " + lastEvent.eventType +
        	//              ", lastTarget " + lastEvent.target, "gridEdit");
            
            	// If we're explicitly suppressing edit on focus, don't start editing.
                if (parent._suppressEditOnFocus) {
                    delete parent._suppressEditOnFocus;
                } else {
                    // this'll run through every cell in every record until it finds one that's
                    // editable
                    var editCell = parent.findNextEditCell(0,0,true,true);

                    if (editCell != null) 
                        parent.handleEditCellEvent(editCell[0], editCell[1], isc.ListGrid.FOCUS);
                }
            }
        }
        
        return returnVal;
    },
    
	// Override draw() to scroll to the appropriate cell if 'scrollCellIntoView' was called
	// before the body was drawn/created
	// Also update the edit form item rows if we're already editing.
    draw : function (a,b,c,d) {

        var lg = this.grid;
        
        if (lg.getEditRow() != null) {
            var rowNum = lg.getEditRow(),
                record = lg.getRecord(rowNum),
                fieldNum = lg.getEditCol(),
                form = lg._editRowForm,
                items = lg.getEditRowItems(record, rowNum, fieldNum, lg.editByCell);                  
            form.setItems(items);
            
            
            form._setValuesPending = true;
            
        }
        this.invokeSuper(null, "draw", a,b,c,d);
        
        // If we are showing any edit form items, notify them that they have been written
        // into the DOM.
        
        if (lg._editRowForm) lg._editItemsDrawingNotification(null, null, this);
        
        // Tell the form to update its values (setItemValues())
        // (do this after the items have been notified that they're drawn to ensure items'