Changeset 11

Timestamp:

08/29/08 17:11:23 (4 years ago)

Author:

tsuckowhomberg

Message:

• fixed: (BufferedGridView?.js) fixed a bug that would not recalculate the scrollbar's height if the number of possible rows to display in the view would exceed the total number of records in the store
• enhancement: (BufferedGridView?.js) last row in the grid is now clipped instead of removed if it is not fully displayable
• fixed: (BufferedStore?.js) buffer range would not store the number of the total length of the records when last possible range is reached, but instead the number of the start-parameter with the "limit"-parameter, which lead to errors when a last possible record to render is requested that cannot be found in the store

Location:

trunk

Files:

• CHANGELOG (modified) (1 diff)
• src/BufferedGridView.js (modified) (14 diffs)
• src/BufferedRowSelectionModel.js (modified) (1 diff)
• src/BufferedStore.js (modified) (26 diffs)

trunk/CHANGELOG

@@ -1 @@
-
+Version 0.2rc1
+29-August-2008
+
 - fixes:
+ - BufferedGridView.js: fixed a bug that would not recalculate the scrollbar's
+height if the number of possible rows to display in the view would exceed the
+total number of records in the store
  - BufferedRowSelectionModel: "selectRow()" would allow selecting indexes greater than
 the "totalLength"-property of the store; added condition to check whether the index is
 out of bounds (closes google issue 5)
+- BufferedStore.js: buffer range would not store the number of the total length
+of the records when last possible range is reached, but instead the number of the
+start-parameter with the "limit"-parameter, which lead to errors when a last
+possible record to render is requested that cannot be found in the store
+
+ - enhancements:
+- BufferedGridView.js: last row in the grid is now clipped instead of removed if
+it is not fully displayable
+
+
 
 Version 0.1.2

trunk/src/BufferedGridView.js

@@ -128 +128 @@
 // {{{ --------------------------properties-------------------------------------
     /**
+     * Stores the height of the header. Needed for recalculating scroller inset height.
+     * @param {Number}
+     */
+    hdHeight : 0,
+
+    /**
+     * Indicates wether the last row in the grid is clipped and thus not fully display.
+     * 1 if clipped, otherwise 0.
+     * @param {Number}
+     */
+    rowClipped : 0,
+
+
+    /**
      * This is the actual y-scroller that does control sending request to the server
      * based upon the position of the scrolling cursor.
@@ -239 +253 @@
             this.lastRowIndex = 0;
             this.lastIndex    = 0;
+            this.adjustVisibleRows();
             this.adjustScrollerPos(-this.liveScroller.dom.scrollTop, true);
             this.showLoadMask(false);
@@ -244 +259 @@
             //this.replaceLiveRows(0, true);
             this.fireEvent('cursormove', this, 0,
-                           Math.min(this.ds.totalLength, this.visibleRows),
+                           Math.min(this.ds.totalLength, this.visibleRows-this.rowClipped),
                            this.ds.totalLength);
         } else {
@@ -363 +378 @@
         this.liveScroller.on('scroll', this.onLiveScroll,  this, {buffer : this.scrollDelay});
 
-            this.mainHd = new E(this.mainWrap.dom.firstChild);
+        var thd = this.mainWrap.dom.firstChild;
+            this.mainHd = new E(thd);
+
+            this.hdHeight = thd.offsetHeight;
+
             this.innerHd = this.mainHd.dom.firstChild;
         this.scroller = new E(this.mainWrap.dom.childNodes[1]);
@@ -629 +648 @@
             this.adjustScrollerPos(-this.rowHeight, true);
             this.fireEvent('cursormove', this, this.rowIndex,
-                           Math.min(this.ds.totalLength, this.visibleRows),
+                           Math.min(this.ds.totalLength, this.visibleRows-this.rowClipped),
                            this.ds.totalLength);
 
@@ -753 +772 @@
                 // the cursor did virtually move
                 this.fireEvent('cursormove', this, this.rowIndex,
-                               Math.min(this.ds.totalLength, this.visibleRows),
+                               Math.min(this.ds.totalLength, this.visibleRows-this.rowClipped),
                                this.ds.totalLength);
 
@@ -812 +831 @@
             this.processRows();
             this.fireEvent('cursormove', this, this.rowIndex,
-                           Math.min(this.ds.totalLength, this.visibleRows),
+                           Math.min(this.ds.totalLength, this.visibleRows-this.rowClipped),
                            this.ds.totalLength);
         }
@@ -1157 +1176 @@
 
         var rowInd = row-this.rowIndex;
-        if (row >= this.rowIndex+this.visibleRows) {
+
+        if (this.rowClipped && row == this.rowIndex+this.visibleRows-1) {
+            this.adjustScrollerPos(this.rowHeight );
+        } else if (row >= this.rowIndex+this.visibleRows) {
             this.adjustScrollerPos(((row-(this.rowIndex+this.visibleRows))+1)*this.rowHeight);
         } else if (row <= this.rowIndex) {
@@ -1171 +1193 @@
             cellEl = this.getCell(row-this.rowIndex, col);
         }
+
         if(!rowEl){
             return;
@@ -1245 +1268 @@
     {
         this.fireEvent('cursormove', this, index,
-                       Math.min(this.ds.totalLength, this.visibleRows),
+                       Math.min(this.ds.totalLength, this.visibleRows-this.rowClipped),
                        this.ds.totalLength);
 
@@ -1420 +1443 @@
             if (append) {
                 this.removeRows(0, spill-1);
-                var html = this.renderRows(cursorBuffer+this.visibleRows-spill,
-                           cursorBuffer+this.visibleRows-1);
-                Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
+
+                if (cursor+this.visibleRows-1 < this.ds.bufferRange[1]) {
+                    var html = this.renderRows(cursorBuffer+this.visibleRows-spill,
+                               cursorBuffer+this.visibleRows-1);
+                    Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
+                }
             } else {
                 this.removeRows(this.visibleRows-spill, this.visibleRows-1);
@@ -1453 +1479 @@
 
         // adjust the height of the scrollbar
-        this.liveScroller.dom.style.height = this.liveScroller.dom.parentNode.offsetHeight +
-                                             (Ext.isGecko
-                                             ? ((ds.totalLength > 0 && scrollbar)
-                                                ? - this.horizontalScrollOffset
-                                                : 0)
-                                             : (((ds.totalLength > 0 && scrollbar)
-                                                ? 0 : this.horizontalScrollOffset)))+"px";
+
+        var contHeight = this.liveScroller.dom.parentNode.offsetHeight +
+                         (Ext.isGecko
+                         ? ((ds.totalLength > 0 && scrollbar)
+                            ? - this.horizontalScrollOffset
+                            : 0)
+                         : (((ds.totalLength > 0 && scrollbar)
+                            ? 0 : this.horizontalScrollOffset)))
+
+        this.liveScroller.dom.style.height = contHeight+"px";
+
         if (this.rowHeight == -1) {
             return;
         }
 
-        if (ds.totalLength <= this.visibleRows) {
-            this.liveScrollerInset.style.height = "0px";
-            return;
-        }
-
-        var height = this.rowHeight*ds.totalLength;
-
-        height += (c.getSize().height-(this.visibleRows*this.rowHeight));
-
-        if (scrollbar) {
-            height -= this.horizontalScrollOffset;
-        }
-
-        this.liveScrollerInset.style.height = (height)+"px";
+        // calculate the spill of the inner layer.
+        // spillHeight will contain the number of pixels
+        // the inner layer exceeds the scrollbar
+        var spillHeight = ((this.rowHeight*ds.totalLength)+this.hdHeight)-contHeight;
+
+        // hidden rows is the number of rows which cannot be
+        // displayed and for which a scrollbar needs to be
+        // rendered. This does alsso take clipped rows into account
+        var hiddenRows = 0;
+        if (spillHeight > 0) {
+            hiddenRows = Math.ceil(spillHeight/this.rowHeight);
+        }
+
+        this.liveScrollerInset.style.height = contHeight+(hiddenRows*this.rowHeight)+"px";
     },
 
@@ -1514 +1544 @@
         vh -= this.mainHd.getHeight();
 
+        var totalLength = ds.totalLength || 0;
+
         var visibleRows = Math.max(1, Math.floor(vh/this.rowHeight));
 
-        var totalLength = ds.getTotalCount();
-
-        if (totalLength < this.visibleRows || this.visibleRows == visibleRows) {
+        this.rowClipped = 0;
+        if (this.rowHeight / 3 < (vh - (visibleRows*this.rowHeight))) {
+            visibleRows = Math.min(visibleRows+1, totalLength);
+            this.rowClipped = 1;
+        }
+
+        // adjusted condition to force rerendering of scrollbar if the
+        // toalLength is less than visibleRows
+        if (this.visibleRows == visibleRows) {
             return;
         }
@@ -1525 +1563 @@
 
         if (this.rowIndex + visibleRows > totalLength) {
-            this.rowIndex     = Math.max(0, ds.totalLength-this.visibleRows);
+            this.rowIndex     = Math.max(0, totalLength-visibleRows);
             this.lastRowIndex = this.rowIndex;
-            this.updateLiveRows(this.rowIndex, true);
-        } else {
-            this.updateLiveRows(this.rowIndex, true);
-        }
+        }
+
+        this.updateLiveRows(this.rowIndex, true);
+
     },
 

trunk/src/BufferedRowSelectionModel.js

@@ -271 +271 @@
 
 
-
     /**
      * Deselects a row.

trunk/src/BufferedStore.js

@@ -2 +2 @@
  * Ext.ux.grid.BufferedStore V0.9
  * Copyright(c) 2007, http://www.siteartwork.de
- * 
+ *
  * Licensed under the terms of the Open Source LGPL 3.0
  * http://www.gnu.org/licenses/lgpl.html
@@ -28 +28 @@
  * Pending selections are represented by row indexes which have been selected but
  * which records have not yet been available in the store. The loadSelections method
- * will initiate a request to the data repository (same url as specified in the 
+ * will initiate a request to the data repository (same url as specified in the
  * url config parameter for the store) to fetch the pending selections. The additional
- * parameter send to the server is the "ranges" parameter, which will hold a json 
+ * parameter send to the server is the "ranges" parameter, which will hold a json
  * encoded string representing ranges of row indexes to load from the data repository.
  * As an example, pending selections with the indexes 1,2,3,4,5,9,10,11,16 would
  * have to be translated to [1,5],[9,11],[16].
  * Please note, that by indexes we do not understand (primary) keys of the data,
- * but indexes as represented by the view. To get the ranges of pending selections, 
- * you can use the getPendingSelections method of the BufferedRowSelectionModel, which 
+ * but indexes as represented by the view. To get the ranges of pending selections,
+ * you can use the getPendingSelections method of the BufferedRowSelectionModel, which
  * should be used as the default selection model of the grid.
  *
@@ -61 +61 @@
  * computed by the underlying store's sort algorithm. Whenever a record should be
  * added to the store, the insert index should be calculated and the used as the
- * parameter for the insert method. The findInsertIndex method will return a value 
- * that equals to Number.MIN_VALUE or Number.MAX_VALUE if the added record would not 
+ * parameter for the insert method. The findInsertIndex method will return a value
+ * that equals to Number.MIN_VALUE or Number.MAX_VALUE if the added record would not
  * change the current state of the store. If that happens, this data is not available
  * in the store, and may be requested later on when a new request for new data is made.
@@ -69 +69 @@
  * --------
  * remoteSort will always be set to true, no matter what value the user provides
- * using the config object. 
+ * using the config object.
  *
  * @constructor
@@ -77 +77 @@
  */
 Ext.ux.grid.BufferedStore = function(config) {
-    
+
     config = config || {};
-    
+
     // remoteSort will always be set to true.
     config.remoteSort = true;
-    
+
     Ext.apply(this, config);
-    
+
     this.addEvents({
          /**
@@ -112 +112 @@
           */
         'selectionsload'       : true
-        
+
     });
-    
+
     Ext.ux.grid.BufferedStore.superclass.constructor.call(this, config);
-    
+
     this.totalLength = 0;
-    
+
     /**
      * The array represents the range of rows available in the buffer absolute to
@@ -125 +125 @@
      */
     this.bufferRange = [0, this.bufferSize];
-    
+
     this.on('clear', function (){
         this.bufferRange = [0, this.bufferSize];
     }, this);
-    
+
     if(this.url && !this.selectionsProxy){
         this.selectionsProxy = new Ext.data.HttpProxy({url: this.url});
     }
-        
+
 };
 
@@ -144 +144 @@
      */
     version : null,
-     
+
     /**
      * Inserts a record at the position as specified in index.
@@ -151 +151 @@
      * the set of data in the underlying store has been changed.
      * If the index equals to 0 and the length of data in the store equals to
-     * bufferSize, the add-event will be triggered with Number.MIN_VALUE to 
-     * indicate that a record has been prepended. If the index equals to 
+     * bufferSize, the add-event will be triggered with Number.MIN_VALUE to
+     * indicate that a record has been prepended. If the index equals to
      * bufferSize, the method will assume that the record has been appended and
      * trigger the add event with index set to Number.MAX_VALUE.
@@ -158 +158 @@
      * Note:
      * -----
-     * The index parameter is not a view index, but a value in the range of 
+     * The index parameter is not a view index, but a value in the range of
      * [0, this.bufferSize].
      *
      * You are strongly advised to not use this method directly. Instead, call
-     * findInsertIndex wirst and use the return-value as the first parameter for 
+     * findInsertIndex wirst and use the return-value as the first parameter for
      * for this method.
      */
@@ -169 +169 @@
         // hooray for haskell!
         records = [].concat(records);
-        
-        index = index >= this.bufferSize ? Number.MAX_VALUE : index; 
-        
-        if (index == Number.MIN_VALUE || index == Number.MAX_VALUE) { 
+
+        index = index >= this.bufferSize ? Number.MAX_VALUE : index;
+
+        if (index == Number.MIN_VALUE || index == Number.MAX_VALUE) {
             var l = records.length;
             if (index == Number.MIN_VALUE) {
                 this.bufferRange[0] += l;
-                this.bufferRange[1] += l;    
+                this.bufferRange[1] += l;
             }
-            
+
             this.totalLength += l;
             this.fireEvent("add", this, records, index);
             return;
-        } 
+        }
 
         var split = false;
@@ -188 +188 @@
         if (records.length + index >= this.bufferSize) {
             split = true;
-            insertRecords = records.splice(0, this.bufferSize-index)    
+            insertRecords = records.splice(0, this.bufferSize-index)
         }
         this.totalLength += insertRecords.length;
-        
+
         for (var i = 0, len = insertRecords.length; i < len; i++) {
             this.data.insert(index, insertRecords[i]);
             insertRecords[i].join(this);
         }
-        
+
         while (this.getCount() > this.bufferSize) {
             this.data.remove(this.data.last());
         }
-        
+
         this.fireEvent("add", this, insertRecords, index);
-        
+
         if (split == true) {
             this.fireEvent("add", this, records, Number.MAX_VALUE);
         }
-    },     
-    
+    },
+
     /**
      * Remove a Record from the Store and fires the remove event.
      *
-     * If the record is not within the store, the method will try to guess it's 
+     * If the record is not within the store, the method will try to guess it's
      * index by calling findInsertIndex.
      *
@@ -239 +239 @@
     {
         var index = this.data.indexOf(record);
-        
+
         if (index < 0) {
             var ind = this.findInsertIndex(record);
@@ -251 +251 @@
         this.bufferRange[1]--;
         this.data.removeAt(index);
-       
+
         if(this.pruneModifiedRecords){
             this.modified.remove(record);
         }
-        
+
         this.totalLength -= 1;
         this.fireEvent("remove", this, record, index);
@@ -270 +270 @@
         this.totalLength = 0;
         this.data.clear();
-        
+
         if(this.pruneModifiedRecords){
             this.modified = [];
         }
         this.fireEvent("clear", this);
-    },    
-        
+    },
+
     /**
      * Requests a range of data from the underlying data store. Similiar to the
@@ -283 +283 @@
      * Example: To load all records at the positions 1,2,3,4,9,12,13,14, the supplied
      * parameter should equal to [[1,4],[9],[12,14]].
-     * The request will only be done if the beforeselectionsloaded events return 
+     * The request will only be done if the beforeselectionsloaded events return
      * value does not equal to false.
      */
@@ -289 +289 @@
     {
         var max_i = ranges.length;
-        
+
         if(max_i > 0 && !this.selectionsProxy.activeRequest
            && this.fireEvent("beforeselectionsload", this, ranges) !== false){
-            
+
             var lParams = this.lastOptions.params;
-            
+
             var params = {};
             params.ranges = Ext.encode(ranges);
-            
+
             if (lParams) {
                 if (lParams.sort) {
@@ -306 +306 @@
                 }
             }
-            
+
             var options = {};
             for (var i in this.lastOptions) {
                 options.i = this.lastOptions.i;
             }
-            
+
             options.ranges = params.ranges;
-            
-            this.selectionsProxy.load(params, this.reader, 
-                            this.selectionsLoaded, this, 
-                            options);    
-        }     
-    },
-    
+
+            this.selectionsProxy.load(params, this.reader,
+                            this.selectionsLoaded, this,
+                            options);
+        }
+    },
+
     /**
      * Alias for loadRanges.
-     */    
+     */
     loadSelections : function(ranges)
     {
         this.loadRanges(ranges);
     },
-    
+
     /**
      * Called as a callback by the proxy which loads pending selections.
@@ -337 +337 @@
     {
         if (this.checkVersionChange(o, options, success) !== false) {
-            this.fireEvent("selectionsload", this, o.records, Ext.decode(options.ranges));    
+            this.fireEvent("selectionsload", this, o.records, Ext.decode(options.ranges));
         } else {
             this.fireEvent("selectionsload", this, [], Ext.decode(options.ranges));
@@ -344 +344 @@
 
     /**
-     * Checks if the version supplied in <tt>o</tt> differs from the version 
+     * Checks if the version supplied in <tt>o</tt> differs from the version
      * property of the current instance of this object and fires the versionchange
      * event if it does.
@@ -350 +350 @@
     // private
     checkVersionChange : function(o, options, success)
-    {    
+    {
         if(o && success !== false){
             if (o.version !== undefined) {
                 var old      = this.version;
-                this.version = o.version;    
+                this.version = o.version;
                 if (this.version !== old) {
                     return this.fireEvent('versionchange', this, old, this.version);
                 }
-            } 
-        }    
-    },
-    
-    /**
-     * The sort procedure tries to respect the current data in the buffer. If the 
-     * found index would not be within the bufferRange, Number.MIN_VALUE is returned to 
-     * indicate that the record would be sorted below the first record in the buffer 
-     * range, while Number.MAX_VALUE would indicate that the record would be added after 
+            }
+        }
+    },
+
+    /**
+     * The sort procedure tries to respect the current data in the buffer. If the
+     * found index would not be within the bufferRange, Number.MIN_VALUE is returned to
+     * indicate that the record would be sorted below the first record in the buffer
+     * range, while Number.MAX_VALUE would indicate that the record would be added after
      * the last record in the buffer range.
      *
-     * The method is not guaranteed to return the relative index of the record 
+     * The method is not guaranteed to return the relative index of the record
      * in the data model as returned by the underlying domain model.
      */
@@ -377 +377 @@
         var index = Ext.ux.grid.BufferedStore.superclass.findInsertIndex.call(this, record);
         this.remoteSort = true;
-        
+
         if (this.bufferRange[0] > 0 && index == 0) {
-            index = Number.MIN_VALUE;    
+            index = Number.MIN_VALUE;
         } else if (index >= this.bufferSize) {
             index = Number.MAX_VALUE;
         }
-        
+
         return index;
-    },    
-    
+    },
+
     /**
      * Removed snapshot check
@@ -400 +400 @@
         };
         this.data.sort(direction, fn);
-    },    
-    
-
-    
-    /**
-     * @cfg {Number} bufferSize The number of records that will at least always 
+    },
+
+
+
+    /**
+     * @cfg {Number} bufferSize The number of records that will at least always
      * be available in the store for rendering. This value will be send to the
      * server as the <tt>limit</tt> parameter and should not change during the
-     * lifetime of a grid component. Note: In a paging grid, this number would 
+     * lifetime of a grid component. Note: In a paging grid, this number would
      * indicate the page size.
-     * The value should be set high enough to make a userfirendly scrolling 
-     * possible and should be greater than the sum of {nearLimit} and 
+     * The value should be set high enough to make a userfirendly scrolling
+     * possible and should be greater than the sum of {nearLimit} and
      * {visibleRows}. Usually, a value in between 150 and 200 is good enough.
      * A lesser value will more often make the store re-request new data, while
      * a larger number will make loading times higher.
-     */    
-    
-    
+     */
+
+
     // private
     onMetaChange : function(meta, rtype, o)
     {
         this.version = null;
-        Ext.ux.grid.BufferedStore.superclass.onMetaChange.call(this, meta, rtype, o);    
-    },        
-    
-   
+        Ext.ux.grid.BufferedStore.superclass.onMetaChange.call(this, meta, rtype, o);
+    },
+
+
     /**
      * Will fire the versionchange event if the version of incoming data has changed.
@@ -433 +433 @@
     {
         this.checkVersionChange(o, options, success);
-        
+
         // we have to stay in sync with rows that may have been skipped while
         // the request was loading.
         this.bufferRange = [
-            options.params.start, 
-            options.params.start+options.params.limit
+            options.params.start,
+            Math.min(options.params.start+options.params.limit, o.totalRecords)
         ];
-            
-        Ext.ux.grid.BufferedStore.superclass.loadRecords.call(this, o, options, success);    
-    },    
-    
+
+        Ext.ux.grid.BufferedStore.superclass.loadRecords.call(this, o, options, success);
+    },
+
     /**
      * Get the Record at the specified index.
@@ -456 +456 @@
         var modelIndex = index - this.bufferRange[0];
         return this.data.itemAt(modelIndex);
-    },    
-    
+    },
+
 //--------------------------------------EMPTY-----------------------------------
     // no interface concept, so simply overwrite and leave them empty as for now
     clearFilter : function(){},
-    isFiltered : function(){},  
-    collect : function(){},      
+    isFiltered : function(){},
+    collect : function(){},
     createFilterFn : function(){},
     sum : function(){},
@@ -470 +470 @@
     queryBy : function(){},
     find : function(){},
-    findBy : function(){}    
-    
+    findBy : function(){}
+
 });