bufferedgridview.js

extjs + mysql + java

	/**
	 * Layouts the grid's view taking the scroller into account. The height
	 * of the scroller gets adjusted depending on the total width of the columns.
	 * The width of the grid view will be adjusted so the header and the rows do
	 * not overlap the scroller.
	 * This method will also compute the row-height based on the first row this 
	 * grid displays and will adjust the number of visible rows if a resize 
	 * of the grid component happened.
	 * This method overwrites the parents implementation.
	 */
	//private    
    layout : function()
    {
        if(!this.mainBody){
            return; // not rendered
        }
        var g = this.grid;
        var c = g.getGridEl(), cm = this.cm,
                expandCol = g.autoExpandColumn,
                gv = this;

        var csize = c.getSize(true);
        
        // set vw to 19 to take scrollbar width into account!
        var vw = csize.width-this.scrollOffset;
    
        if(vw < 20 || csize.height < 20){ // display: none?
            return;
        }

        if(g.autoHeight){
            this.scroller.dom.style.overflow = 'visible';
        }else{
            this.el.setSize(csize.width, csize.height);

            var hdHeight = this.mainHd.getHeight();
            var vh = csize.height - (hdHeight);

            this.scroller.setSize(vw, vh);
            if(this.innerHd){
                this.innerHd.style.width = (vw)+'px';
            }
        }
        
        if(this.forceFit){
            if(this.lastViewWidth != vw){
                this.fitColumns(false, false);
                this.lastViewWidth = vw;
            }
        }else {
            this.autoExpand();
        }
        
        
        // adjust the number of visible rows and the height of the scroller.
        this.adjustVisibleRows();
        this.adjustBufferInset();
        
                                            
        this.onLayout(vw, vh);
    },   

// {{{ ----------------------dom/mouse listeners--------------------------------
    /**
     * Called when a column width has been updated. Adjusts the scroller height
     * and the number of visible rows wether the horizontal scrollbar is shown
     * or not.
     */
    onColumnWidthUpdated : function(col, w, tw)
    {
        this.adjustVisibleRows();
        this.adjustBufferInset();   
    },
    
    /**
     * Called when the width of all columns has been updated. Adjusts the scroller 
     * height and the number of visible rows wether the horizontal scrollbar is shown
     * or not.
     */
    onAllColumnWidthsUpdated : function(ws, tw)
    {
        this.adjustVisibleRows();
        this.adjustBufferInset();
    },  

    /**
     * Callback for selecting a row. The index of the row is the absolute index 
     * in the datamodel and gets translated to the index in the view.
     * Overwrites the parent's implementation.
     */        
    // private
    onRowSelect : function(row)
    {
        if (row < this.rowIndex || row > this.rowIndex+this.visibleRows) {
            return;
        }
        
        var viewIndex = row-this.rowIndex;
        
        this.addRowClass(viewIndex, "x-grid3-row-selected");
    },

    /**
     * Callback for deselecting a row. The index of the row is the absolute index 
     * in the datamodel and gets translated to the index in the view.
     * Overwrites the parent's implementation.
     */        
    // private
    onRowDeselect : function(row)
    {
        if (row < this.rowIndex || row > this.rowIndex+this.visibleRows) {
            return;
        }
        
        var viewIndex = row-this.rowIndex;
        
        this.removeRowClass(viewIndex, "x-grid3-row-selected");
    },

    /**
     * Callback for selecting a cell. The index of the row is the absolute index 
     * in the datamodel and gets translated to the index in the view.
     * Overwrites the parent's implementation.
     */        
    // private
    onCellSelect : function(row, col)
    {
        if (row < this.rowIndex || row > this.rowIndex+this.visibleRows) {
            return;
        }
        
        var viewIndex = row-this.rowIndex;
        
        var cell = this.getCell(viewIndex, col);
        if(cell){
            this.fly(cell).addClass("x-grid3-cell-selected");
        }
    },

    /**
     * Callback for deselecting a cell. The index of the row is the absolute index 
     * in the datamodel and gets translated to the index in the view.
     * Overwrites the parent's implementation.
     */    
    // private
    onCellDeselect : function(row, col)
    {
        if (row < this.rowIndex || row > this.rowIndex+this.visibleRows) {
            return;
        }
        
        var viewIndex = row-this.rowIndex;
        
        var cell = this.getCell(viewIndex, col);
        if(cell){
            this.fly(cell).removeClass("x-grid3-cell-selected");
        }
    },

    /**
     * Callback for onmouseover event of the grid's rows. The index of the row is
     * the absolute index in the datamodel and gets translated to the index in the
     * view.
     * Overwrites the parent's implementation.
     */    
    // private
    onRowOver : function(e, t)
    {
        var row;
        if((row = this.findRowIndex(t)) !== false){
            var viewIndex = row-this.rowIndex;
            this.addRowClass(viewIndex, "x-grid3-row-over");
        }
    },

    /**
     * Callback for onmouseout event of the grid's rows. The index of the row is
     * the absolute index in the datamodel and gets translated to the index in the
     * view.
     * Overwrites the parent's implementation.
     */
    // private
    onRowOut : function(e, t)
    {
        var row;
        if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
            var viewIndex = row-this.rowIndex;
            this.removeRowClass(viewIndex, "x-grid3-row-over");
        }
    },    


// {{{ ----------------------data listeners-------------------------------------
    /**
     * Called when the buffer gets cleared. Simply calls the updateLiveRows method
     * with the adjusted index and should force the store to reload
     */
    // private
    onClear : function()
    {
        this.reset(false);//var newIndex = Math.max(this.bufferRange[0] - this.visibleRows, 0);
        //this.updateLiveRows(newIndex, true, true);
    },

    
    /**
     * Callback for the underlying store's remove method. The current 
     * implementation does only remove the selected row which record is in the 
     * current store.
     *
     */
    // private
    onRemove : function(ds, record, index, isUpdate)
    {
        if (index == Number.MIN_VALUE || index == Number.MAX_VALUE) {
            this.fireEvent("beforerowremoved", this, index, record);
            this.fireEvent("rowremoved",       this, index, record);
            this.adjustBufferInset();
            return;
        }
        var viewIndex = index + this.bufferRange[0];
        if(isUpdate !== true){
            this.fireEvent("beforerowremoved", this, viewIndex, record);
        }
        
        var domLength = this.getRows().length;
        
        if (viewIndex < this.rowIndex) {
            // if the according row is not displayed within the visible rect of 
            // the grid, just adjust the row index and the liveScroller
            this.rowIndex--;
            this.lastRowIndex = this.rowIndex;
            this.adjustScrollerPos(-this.rowHeight, true);
            this.fireEvent('cursormove', this, this.rowIndex, 
                           Math.min(this.ds.totalLength, this.visibleRows), 
                           this.ds.totalLength);
                           
        } else if (viewIndex >= this.rowIndex && viewIndex < this.rowIndex+domLength) {
            
            var lastPossibleRIndex = this.rowIndex-this.bufferRange[0]+this.visibleRows;
            
            var cInd = viewIndex-this.rowIndex;
            var rec  = this.ds.getAt(lastPossibleRIndex);
            
            // did we reach the end of the buffer range?
            if (rec == null) {
                // are there more records we could use? send a buffer request
                if (this.ds.totalLength > this.rowIndex+this.visibleRows) {
                    if(isUpdate !== true){
                        this.fireEvent("rowremoved", this, viewIndex, record);
                    }
                    this.updateLiveRows(this.rowIndex, true, true);
                    return;
                } else {
                    // no more records, neither in the underlying data model
                    // nor in the data store
                    if (this.rowIndex == 0) {
                        // simply remove the row from the dom
                        this.removeRows(cInd, cInd);
                    } else {
                        // scroll a new row in the rect so the whole rect is filled 
                        // with rows
                        this.rowIndex--;
                        if (this.rowIndex < this.bufferRange[0]) {
                            // buffer range is invalid! request new data
                            if(isUpdate !== true){
                               this.fireEvent("rowremoved", this, viewIndex, record);
                            }
                            this.updateLiveRows(this.rowIndex);
                            return;
                        } else {
                            // still records in the store, simply update the dom
                            this.replaceLiveRows(this.rowIndex);
                        }
                    }
                }
            } else {
                
                // the record is right within the visible rect of the grid.
                // remove the row that represents the record and append another
                // record from the store
                this.removeRows(cInd, cInd);
                var html = this.renderRows(lastPossibleRIndex, lastPossibleRIndex);
                Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
            }
        }    
        
        // a record within the bufferrange was removed, so adjust the buffer
        // range
        this.bufferRange[1]--;
        this.adjustBufferInset();
        
        if(isUpdate !== true){
            this.fireEvent("rowremoved", this, viewIndex, record);
        }
        
        this.processRows(0, undefined, true);
    },

    /**
     * The callback for the underlying data store when new data was added. 
     * If <tt>index</tt> equals to <tt>Number.MIN_VALUE</tt> or <tt>Number.MAX_VALUE</tt>, the 
     * method can't tell at which position in the underlying data model the
     * records where added. However, if <tt>index</tt> equals to <tt>Number.MIN_VALUE</tt>, 
     * the <tt>rowIndex</tt> property will be adjusted to <tt>rowIndex+records.length</tt>,
     * and the <tt>liveScroller</tt>'s properties get adjusted so it matches the
     * new total number of records of the underlying data model.
     * The same will happen to any records that get added at the store index which
     * is currently represented by the first visible row in the view.
     * Any other value will cause the method to compute the number of rows that 
     * have to be (re-)painted and calling the <tt>insertRows</tt> method, if
     * neccessary.
     *
     * This method triggers the <tt>beforerowsinserted</tt> and <tt>rowsinserted</tt>
     * event, passing the indexes of the records as they may default to the 
     * positions in the underlying data model. However, due to the fact that 
     * any sort algorithm may have computed the indexes of the records, it is
     * not guaranteed that the computed indexes equal to the indexes of the 
     * underlying data model.
     *
     * @param {Ext.ux.grid.BufferedStore} ds The datastore that buffers records
     *                                       from the underlying data model
     * @param {Array} records An array containing the newly added 
     *                        {@link Ext.data.Record}s 
     * @param {Number} index The index of the position in the underlying
     *                       {@link Ext.ux.grid.BufferedStore} where the rows
     *                       were added.
     */
    // private
    onAdd : function(ds, records, index)
    {
        var recordLen = records.length;
        
        // values of index which equal to Number.MIN_VALUE or Number.MAX_VALUE 
        // indicate that the records were not added to the store. The component 
        // does not know which index those records do have in the underlying
        // data model
        if (index == Number.MAX_VALUE || index == Number.MIN_VALUE) {
            this.fireEvent("beforerowsinserted", this, index, index);
            
            // if index equals to Number.MIN_VALUE, shift rows!
            if (index == Number.MIN_VALUE) {
                
                this.rowIndex     = this.rowIndex + recordLen;
                this.lastRowIndex = this.rowIndex;
                this.bufferRange[0] += recordLen;
                this.bufferRange[1] += recordLen;
                
                this.adjustBufferInset();               
                this.adjustScrollerPos(this.rowHeight*recordLen, true);
                
                this.fireEvent("rowsinserted", this, index, index);
                this.processRows();
                // the cursor did virtually move
                this.fireEvent('cursormove', this, this.rowIndex, 
                               Math.min(this.ds.totalLength, this.visibleRows), 
                               this.ds.totalLength);
                
                return;
            }
            this.adjustBufferInset();
            this.fireEvent("rowsinserted", this, index, index);
            return;            
        }
        
        // only insert the rows which affect the current view.
        var start = index+this.bufferRange[0];
        var end   = start + (recordLen-1);
        var len   = this.getRows().length;
        
        var firstRow = 0;
        var lastRow  = 0;
        
        // rows would be added at the end of the rows which are currently 
        // displayed, so fire the evnt and return
        if (index >= (this.rowIndex-this.bufferRange[0])+len && len == this.visibleRows) {
            this.fireEvent("beforerowsinserted", this, start, end);    
            this.fireEvent("rowsinserted", this, start, end);