Ext Js Buffered Store getGroups Error

3:09 PM Xun 0 Comments

Ext Js has many features that rock. One of them is buffered grid. So unlikely traditional grid where pagination is done through navigating with a set of controls. Ext buffered grid panel allows you to scroll through the grid infinitely, the same way you would scroll up and down with a long web page. Behind scene, this is made possible by a buffered data store that fetches extra pages of data and cache them in page cache. A buffered store is configured as:
 buffered= true

However with this powerful feature comes with unanticipated bugs (oh, boy, do not we developers live with bugs.)

 The bug today I found is that buffered grid does not go well with grouping and column reordering. So using the sample infinite-grid provided by Sencha, I made a minor modification to have the grid group by author, and I get the following grid:


All is well, until I started to drag and drop to reorder the columns. Oops, after one successful drag-n-drop, the grid frozen.

After a little debugging, I found that the columnMove event triggered a refresh grid call, which in turn triggered a getGroups call, which in turn triggered an unhandled undefined error. StackTrace and error screenshot as the following:

So after some noodling around, I made the following changes and made the grid happy again.
 Ext.define('Ext.csx.data.BufferedJsonStore', {
    extend: 'Ext.data.Store',
    getGroups: function (requestGroupString) {
        if (!this.data.items) {
            return [];

Complete code available at: https://github.com/xunxdd/extjs.git