0

I am trying to make a grid with Infinite scroll. I followed the example here but when ever I run the app, there is the following error in the console

verticalScroller config is not supported

I am using ExtJS 6.0.1 classic.

Below is my grid and store configuration

Store

Ext.define('Premier.store.MyStore', {
  extend: 'Ext.data.Store',

  alias: 'store.mystore',
  pageSize: 4, // items per page
  buffered: true,
  remoteSort: true,
  remoteFilter: true,

  proxy: {
    type: 'rest',
    url: '/api/MyController',

    reader: {
      type: 'json',
      rootProperty: 'Data',
      idProperty: 'ID',
      totalProperty: 'TotalCount'
    }
  }
});

Grid

{
  xtype: 'grid',
  height: 90,

  columns: [{
    text: 'Name',
    dataIndex: 'Name',
    flex: 1,
    editor: {
      allowBlank: false
    },
    filter: {
      type: 'string'
    }
  }],

  // store: store,
  store: {
    type: 'mystore'
  },

  verticalScroller: {
    xtype: 'paginggridscroller',
    activePrefetch: false
  },

  selModel: 'rowmodel',
  plugins: [{
    ptype: 'rowediting',
    clicksToEdit: 2
  }, {
    ptype: 'gridfilters'
  }]
}
U.P
  • 7,357
  • 7
  • 39
  • 61
  • `Ex.grid.Panel` in ExtJs 6.0.1 doesn't have a `verticalScrollbar` config. However, it does have `scrollable` config (not sure if it would help you). Please see the [gridpanel API Docs](https://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.grid.Panel). You might also want to see the `Ext.scroll.Scroller` [api docs](https://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.scroll.Scroller) – Dumbledore Mar 24 '16 at 13:27
  • You may also look at the [buffer grid example](http://examples.sencha.com/extjs/6.0.1/examples/classic/grid/buffer-grid.html) if you're interested. – Dumbledore Mar 24 '16 at 13:42
  • If I understand correctly, buffer grid uses data that is already present on the client. I don't want that. I want to load data from server when user scrolls down. Also, I don't think `Ext.scroll.Scroller` is going to work for me. – U.P Mar 24 '16 at 14:40
  • I could be wrong here; however, IMHO, I do think `scrollend` event (in `Ext.scroll.Scroller`) can be used in your scenario ([docs](https://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.scroll.Scroller-event-scrollend)). Once you hit this, you can load more data? – Dumbledore Mar 24 '16 at 14:50

1 Answers1

0

It appears I was using the wrong Example. I was using an example from ExtJS 4.0.

I followed the example here and it worked fine.

U.P
  • 7,357
  • 7
  • 39
  • 61