title: ExtJS Infinite Scroll Grid with remote Filters and Sort
body: <p>In ExtJS 4.1 beta 2 I managed to implement an infinite scroll grid with a remote store. I basically took an existing (fully operational) paging grid (with remote store, filtering and sorting) and then put in the appropriate configs for infinite scrolling:</p>
  
  <pre><code>// Use a PagingGridScroller (this is interchangeable with a PagingToolbar)
  verticalScrollerType: 'paginggridscroller',
  // do not reset the scrollbar when the view refreshs
  invalidateScrollerOnRefresh: false,
  // infinite scrolling does not support selection
  disableSelection: true,   
  </code></pre>
  
  <p>It doesn't say this anywhere in the <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel">docs</a>(see Infinite Scrolling section), but you need to set your store to have <code>buffered: true</code> config. And you can't load with <code>store.load()</code> it needs to be done like this:</p>
  
  <pre><code>store.prefetch({
      start: 0,
      limit: 200,
      callback: function() {
          store.guaranteeRange(0, 99);
      }
  });   
  </code></pre>
  
  <p>With all that, everything works great if I scroll slowly and thus allow the data to prefetch, don't use any filters and don't use any sorting.</p>
  
  <p>However, if I scroll fast or try to make the infinite scroll grid reload with a filter active or while sorting it all breaks apart. Error is <code>options is undefined</code>.</p>
  
  <p>I've spent a couple of hours doing some tracing in the code and googling and aside from concluding that no one has implemented an infinite scroll grid with remote filters and remote scrolling, I have found the following:</p>
  
  <p>The filtering is breaking down because of this method in <code>Ext.data.Store</code> which is called by the infinite scroller when it needs more data from the server:</p>
  
  <pre><code>mask: function() {
      this.masked = true;   
      this.fireEvent('beforeload');
  },
  </code></pre>
  
  <p>For some reason, this method fires the <code>beforeload</code> event <strong>without</strong> the <code>Ext.data.Operation</code> parameter which is supposed to be part of it as specified <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.AbstractStore-event-beforeload">here</a>.</p>
  
  <p>As a result, an error occurs in the <code>onbeforeload</code> handler in <code>Ext.ux.grid.FiltersFeature</code> because of course "options" is undefined:</p>
  
  <pre><code>/**
   * @private
   * Handler for store's beforeload event when configured for remote filtering
   * @param {Object} store
   * @param {Object} options
   */
  onBeforeLoad : function (store, options) {
  
      options.params = options.params || {};
      this.cleanParams(options.params);
      var params = this.buildQuery(this.getFilterData());
      Ext.apply(options.params, params);
  
  },
  </code></pre>
  
  <p>I can cut out the call to this <code>mask</code> method from the PagingScroller code and then the scroll functionality is great. I can scroll as fast as I like and it loads the data properly. <strong>But</strong> then filters and sort does not get applied to the ajax requests.</p>
  
  <p>I haven't dived as much into the sorting aspect but I think it something similar with this <code>mask</code> method because sort is simply another element contained by the <code>operation</code> object and it causes <strong>no</strong> operation object to be passed to the ajax request.</p>
  
  <p>I'm thinking that if I could just figure out how to force the <code>mask</code> method to fire <code>beforeload</code> with the <code>operation</code> parameter (like the docs say it is supposed to) everything will be fine. Problem is, I haven't been able to figure out how to do that. Any suggestions?</p>
  
  <p>If someone would just tell me that I am wrong and people have in fact made this work, I would be inspired, but a snippet of any overrides you used to handle this problem or a link would be much appreciated.</p>
  
  <p>I've also tried downgrading to 4.0.7 and 4.0.2a and I get the same results, so it isn't just a beta problem.</p>
  
  <p><strong>Update - 7 Feb 12:</strong></p>
  
  <p>This seems like it may actually be a <code>Ext.ux.grid.FilterFeature</code> problem not an infinite scrolling problem. If I remove the FilterFeature config entirely infinite scrolling works great and does pass the sorting params to my backend when I sort by a column. I will start looking into the FilterFeature end of things.</p>