Infinite Scrolling No Rendering

I am trying to use the extJS4.1 infinite scroll function.
Ajax calls are made, data is returned, but only the first page is loaded.
What am I doing wrong? When I scroll down, nothing happens.

My code is:
Score:

Ext.define('BM.store.Tests', { extend: 'Ext.data.Store', model: 'BM.model.Test', storeId: 'Tests', buffered: true, leadingBufferZone: 50, pageSize: 25, purgePageCount: 0, autoLoad: true }); 

The proxy server is in the model:

 proxy: { type: 'ajax', api: { create: '../webapp/tests/create', read: '../webapp/tests', update: '../webapp/tests/update' }, reader: { type: 'json', root: 'tests', successProperty: 'success' } } 

Grid:

 Ext.define('BM.view.test.MacroList', { extend: 'Ext.grid.Panel', alias:'widget.macro-test-list', store: 'Tests', // loadMask: true, // selModel: { // pruneRemoved: false // }, // viewConfig: { // trackOver: false // }, verticalScroller: { numFromEdge: 5, trailingBufferZone: 10, leadingBufferZone: 20 }, initComponent: function() { this.columns = [ { xtype: 'gridcolumn', dataIndex: 'name', text: 'Name' }, { xtype: 'datecolumn', dataIndex: 'created', text: 'Date Created', format: 'dMY' }, { xtype: 'datecolumn', dataIndex: 'changed', text: 'Last Updated', format: 'dMY' } ]; this.callParent(arguments); } 

The only thing that differs from my implementation and that in the examples is that my grid does not appear in the body.
The viewport contains a border layout.
The grid is part of the panel of the western region:

 { collapsible: true, region: 'west', xtype: 'macro', width: 500 } 

Macro Panel:

 Ext.define('BM.view.Macro', { extend: 'Ext.panel.Panel', alias: 'widget.macro', title: 'Tests', layout: { type: 'vbox', align: 'stretch' }, items: [ { id: "macro-test-list-id", xtype: 'macro-test-list', flex: 1 }, { id: "macro-report-panel-id", xtype: 'macro-report-list', title: false, flex: 1 }, { id: "macro-report-list-id-all", xtype: 'macro-report-list-all', flex: 1, hidden: true, layout: 'anchor' } ] }); 

I tried a lot of things, changing layouts, giving the grid a fixed height, etc.

Nothing works, scroll down and the grid will not refresh.
Another information: the database contains 53 data records. I get 3 ajax calls, but only the first 25 entries appear (as I requested).
Any thoughts?

+4
source share
2 answers

It looks like you might forget to put the total property in the JSON server response. Your answer has this structure:

 { "total": 53, "tests": [(...)] } 

The name totalProperty defined in the Reader configuration and defaults to total .

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Reader-cfg-totalProperty

+2
source

You need to upgrade to ExtJS 4.2!

0
source

Source: https://habr.com/ru/post/1433560/


All Articles