Bug
Inserts, removes, and/or filtering on buffered grids do not persist. Only the current page is affected, not the entire dataset.

Environment
OS: Windows 7 Professional SP1 x64
ExtJS: 4.0.2 RC3
Browsers:
  • Google Chrome 12.0.742.91
  • Firefox 4.0.1
  • Internet Explorer 9.0.8112.16421
  • Safari 5.0.5 (7533.21.1)
  • Opera 11.11 (Build 2109)

Steps to reproduce:
  1. Append the code below to the buffer-grid example (examples/grid/buffer-grid.js)
    Code:
    var add = Ext.create('Ext.button.Button', {
    	text: 'add record',
    	renderTo: Ext.getBody().createChild()
    });
    add.on('click', function() {
    	var d = createFakeData(1);
    	store.insert(0, Ext.ModelManager.create(d[0], 'Employee'));
    }, this);
    
    var remove = Ext.create('Ext.button.Button', {
    	text: 'remove record',
    	renderTo: Ext.getBody().createChild()
    });
    remove.on('click', function() {
    	store.removeAt(0);
    }, this);
    
    var filter = Ext.create('Ext.button.Button', {
    	text: 'filter',
    	renderTo: Ext.getBody().createChild()
    });
    filter.on('click', function() {
    	store.filterBy(function(record, id) {
    		if (record.get('rating') >= 3) {
    			return true
    		}
    		return false;
    	}, this);
    }, this);
  2. Set store.pageSize = 19 (or grid.height = 1200) in order to view the top of the dataset later on. This alteration is needed due to a different bug introduced in 4.0.2.
  3. Click "add record". Note a new record is inserted at the top, and existing records shift down as expected. However, the sequence is numbered 1, 2, 2, 3, 4....
  4. Scroll all the way down. The expected end index of 5001 is not there. If the end index is only 4994, that is due to a different bug.
  5. Scroll all the way up. The newly added record at index 1 is no longer there. The original record at index 1 remains.
  6. Optionally, you may choose to refresh the page before the next set of tests. It doesn't effect the outcome whether you do or not.
  7. Click "remove record". Note the record at index 1 is removed as expected. Note that an empty space exists where the record at index store.pageSize + 1 is expected.
  8. Scroll all the way down. Note the index is still 5000 (or 4994), not the expected 4999.
  9. Scroll all the way up. The removed record at index 1 returns.
  10. Refresh the page before the next set of tests.
  11. Click "filter". Note only records with ratings 3 or higher are shown, as expected.
  12. Scroll all the way down. Note the end index is still 5000 (or 4994) and unfiltered records are shown.
  13. Scroll all the way up. Note the filter no longer applies.

In Firefox, it may not be possible to view the topmost record when scrolling back and forth.

The following sequence of steps will cause empty spaces to appear: 1-5 -> 11. However, filtering after a refresh works as expected.

Workaround:
The heart of the workaround at the moment is to manage the full set of records, filtered and unfiltered, outside of the grid and its store. Additions, removals and filtering are processed on the externally managed sets, then swapped into the grid's store.

The fix would be to have the grid's store properly update its prefetchData, snapshot and totalCount. However, that involves a complex sequence of scroller (verticalScroller docking/undocking) and grid view updates we are still investigating.

The set of issues are being brought to the framework developer's attention at this opportune time in the hopes these issues will be resolved by 4.0.2 final.