Grid buffered/infinite scrolling in 4.1

[Animal]

I'll check these issues. Meanwhile, remote filtering is fixed. The infinite-scroll.html example now performs a remote filter operation on the dataset based upon a SearchField:

[McQuack_82]

Is it possible to implement grouping remotely like the filters and sorting? Seems like it would be possible to send the params to the server and pre group the data set. I have not seen any implementation or docs on the feature. It would give the make large data sets show much quicker if I could use it with the infinite grid with grouping.

[Animal]

Animal, one other question.


When you are using a store with the MVC architecture, i dont think that calling destroy on it is a good idea. I am not sure if it will mess up the references in the controller.

I am using it with the infinite grid, the user can sort, filter, etc. How would you recommend "Resetting" the store to its original state before calling loadPage() on it again?

I used to have to do this.

store.filters.clear();
if(store.prefetchData){
           store.prefetchData.clear();
}
store.data.clear();
delete store.guaranteedStart;
delete store.guaranteedEnd;
delete store.totalCount;

With 4.1.0, I think the incantation would be

store.pageMap.clear(); // Clear all cached pages
store.loadPage(1); // Start at page 1 again

Where do you see destroy being called?

The destroy method of the PagingScroller now looks like this:

    destroy: function() {
        var me = this,
            scrollListener = me.viewListeners.scroll;

        me.store.un({
            guaranteedrange: me.onGuaranteedRange,
            scope: me
        });
        me.view.un(me.viewListeners);
        if (me.view.rendered) {
            me.stretcher.remove();
            me.view.el.un('scroll', scrollListener.fn, scrollListener.scope);
        }
    }

[Animal]

Is it possible to implement grouping remotely like the filters and sorting? Seems like it would be possible to send the params to the server and pre group the data set. I have not seen any implementation or docs on the feature. It would give the make large data sets show much quicker if I could use it with the infinite grid with grouping.

It would be incredibly difficult to work.

The small subset of data in the Store might contain the last 10 rows of group A, then all of group B, then the first 10 rows of group C

You probably would not want group A's header row to be shown. How could we not render it? The store is grouped, there's a group of "A"s, so it would put a group header in.

So then when scrolling, and it gets re-rendered as the last 30 rows of group B, all of group C, and the first 5 rows of group D, what would the scrollTop of the table element have to be?

It calculates the scrollTop based upon the first store row's ordinal position in the dataset. But there may be an unknown number of group headers in the mix too which change that position.

It's all very complicated.

[Animal]

I am in windows 7, chrome 17. If you are going to use the infinite grid example or tuner, I just increased the width of the first column, then scroll horizontally.

After scrolling horizontally, start scrolling vertically and you will see the headers resetting themselves, most of the time they "bounce" back to the original position, but you can stop at a point, and the headers are not lined up with the view. attached a pic

Attachment 32695

OK, I think I have seen the reason for this.

Try this:

Inject an emptyFn into the grid view as the refreshHeight method:

myGrid.getView().refreshHeight = Ext.emptyFn;

[Animal]

Right, I've fixed that too. It will improve performance.

Now, when the table is refreshed due just to a scroll-induced re-render, it will not run a layout.

That was what was reverting the scrollLeft of the header's Box layout to zero.

[scancubus]

OK, I think I have seen the reason for this.

Try this:

Inject an emptyFn into the grid view as the refreshHeight method:

myGrid.getView().refreshHeight = Ext.emptyFn;

Looks like its working. That gonna make RC1 you think?

[cabal]

Hello Animal.

Your search in infinite grid has a little problem: you cannot change your search word.
If you want to do so, you need to clear search and then search again for diffrent word.

[Moinsen]

Animal,

I think i need some help. 4.1RC1 looks good but i still have problems with buffered scrolling. If i use my old code with guaranteeRange the grid hangs and the busy dialog appears. Thats it! So i replaced guaranteeRange with loadPage but its still the same. And last try was to set autoLoad: true in the store and remove all guaranteeRange and loadPage calls. But no change. I am not using it in the standard way but it runs in 3.4 + 4.07. So could you please have a short look?

This is my store:

var bufferStore = new Ext.data.Store({           
        id: 'bufferStore',           
        pageSize: 100,           
        model: 'Artikel',           
        remoteSort: true,           
        proxy: myProxy,           
        buffered: true,           
        autoLoad: true        
 });

this is the proxy and doRequest:

Ext.define('MyProxy', {           
   extend: 'Ext.data.AjaxProxy',           
 constructor: function(config) {             
   MyProxy.superclass.constructor.call(this, config);             
   this.initConfig(config);             
   logInfo("MyProxy.constructor()");           
},           
doRequest: function(operation, callback, scope) {             
   logInfo("MyProxy.doRequest() starts"); 
   pageRequest(operation, callback, scope);             
   logInfo("MyProxy.doRequest() ends");             
  return;           
}         
});

function pageRequest(operation, callback, scope) { 
   logInfo("pageRequest(" + operation.page + ", " + operation.limit + ") starts");      
   findArtikel3(currentText, operation.page, operation.limit, {  callback:        
     callbackFromPageRequest.bind(this, operation, callback, scope)           
   });           
  logInfo("pageRequest() ends");         
}          
function callbackFromPageRequest(operation, callback, scope, data) {             
   logInfo("callbackFromPageRequest(" + operation.page + ", " + operation.limit + ", " + data.length + ") starts");           
   try {             
     var i, total = 0;             
     var records = [];             
     for(i = 0; i < data.length; i++) {               
        records.push(Ext.ModelMgr.create(data[i], 'Artikel'));             
     }             
     if(data.length > 0) {               
       total = data[0].count; // this is a helper to get total number of records
     }             
     logInfo("data.length = " + data.length);             
     logInfo("total = " + total);                     
     if(data.length > 0) {               
        var resultSet = new Ext.data.ResultSet({                 
           records: records,                 
           count: records.length,                 
           total: total,                 
           loaded: true,                 
           success: true              
        });               
        operation.setSuccessful(true);               
        operation.setCompleted(true);                        
     } else {               
        var resultSet = new Ext.data.ResultSet({                 
            records: records,                 
            count: records.length,                 
            total: total,                 
            loaded: false,                 
            success: false               
        });               
        operation.setSuccessful(false);               
        operation.setCompleted(false);              
    }             
    operation.resultSet = resultSet;             
    operation.records = records;             
    callback.bind(scope, operation)();           
  } 
  catch(ex) {   }           
  logInfo("callbackFromPageRequest() ends");         
}

Maybe something with the ResultSet?

And finally this is my grid:

  this.gridPanel = Ext.create('Ext.grid.Panel', {
    frame: true,
    hideCollapseTool: true,
    collapseDirection : 'left',
    collapsible       : true,
    flex: 3,
    width: '100%',
    height: '100%',
    autoHeight: true,
    autoWidth: true,
    store: store,
    verticalScrollerType: 'paginggridscroller',
    verticalScroller: {
        numFromEdge: 5,
        trailingBufferZone: 10,
        leadingBufferZone: 20
    },
    loadMask: true,
    disableSelection: false,
    invalidateScrollerOnRefresh: false,
    columnLines: true,
    columns: columns,
    title: title,
    viewConfig: {
      stripeRows: true
    },
    tbar: Ext.create('widget.searchtoolbar'),
    bbar: Ext.create('widget.slidertoolbar'),
    layout: {
      type: 'hbox',
      align: 'stretch'
    },
    listeners:{
     ....

As said before it runs in 4.07. I think it has to do with the proxy???

I think i did all written in here:

http://www.sencha.com/forum/showthre...rolling-in-4.1

When i start the application doRequest is executed three times. So 300 records are fetched but the grid hangs (total number is 626).

Thank you!

[Animal]

There is no autoHeight or autoWidth config in Ext 4.1

There's no invalidateScrollerOnRefresh

There's no verticalScrollerType

To use buffered scrolling, you must give the grid a height, either by configuration or a layout of the container it is in.

Do not specify layout on a grid. It uses layout: 'fit' to fit the TableView inside it.