Infinite Grid no longer works in Ext JS 7.3.1 modern

Question

Forced to upgrade 7.2 modern -> 7.3.1 due to Open Tooling broken in node 15.x (an update applied by homebrew on my mac). No I find that grids using virtual store no longer works for selecting anything on the first page! See Sencha's own kitchen sink where the first page is not showing highlights on the first page, but if scrolling down it works and rows are selectable: https://examples.sencha.com/extjs/7.3.0/examples/kitchensink/?modern#infinite-grid Anyone aware of a work around?

Answer 1

EDIT: if you have the grid filters plugin I found that the first page load is aborted and a reload is issued. The reload was not running the onLoad method on the virtualPage. This caused the data to be load but the indexMap not to be updated. I did an override to call this method. This is not well tested... beyond my simple test case.

If you are using Ext.Direct to fill the virtual store and you scroll to fast the system will trip over itself and lock up. I have an override for this as well I will add it at the bottom of this ticket.

    Ext.define('Xxx.override.data.virtual.Store', {
    override: 'Ext.data.virtual.Store',

    privates: {
        handleReload: function(op) {
            var me = this,
                activeRanges = me.activeRanges,
                len = activeRanges.length,
                pageMap = me.pageMap,
                resultSet = op.getResultSet(),
                wasSuccessful = op.wasSuccessful(),
                pageNumber = op.config && op.config.page,
                rsRecords = [],
                i, range, page;
            if (wasSuccessful) {
                me.readTotalCount(resultSet);
                
                if (me.pageMap.getPageCount() !== 0 && pageNumber) {
                    page = me.pageMap.getPage(pageNumber - 1, false);
                    if (page && !(page.error = op.getError())) {
                        
                        
                        page.records = op.getRecords();
                        page.state = 'loaded';
                    }
                }
                page.onLoad(op);  // ONLY CHANGE TO ORIGINAL METHOD
                me.fireEvent('reload', me, op);
                for (i = 0; i < len; ++i) {
                    range = activeRanges[i];
                    if (pageMap.canSatisfy(range)) {
                        range.reload();
                    }
                }
            }
            if (resultSet) {
                rsRecords = resultSet.records;
            }
            me.fireEvent('load', me, rsRecords, wasSuccessful, op);
        }
    }
});

Ext.Direct override when using virtual store.

    Ext.define('Xxx.override.data.proxy.Direct', {
    override: 'Ext.data.proxy.Direct',
    
    abort: function(operation) {
        let returnValue = this.callParent(arguments);
            if (operation && operation.isDataRequest) {
                    operation = operation.getOperation();
            }
        
        // This is the part added by mcg1103.  when using a virtual store
        // when an operation is aborted it is never completed and the Page
        // object is left behind in the loading array among other places.
        // firing the callbacks will gracefully remove all remnants.
        if (operation && Ext.isFunction(operation.triggerCallbacks)) {
            operation.triggerCallbacks();
        }
        
        return returnValue;
        }

});

EDIT: Still do not have a solution, but if you comment out the

plugins: {
    gridfilters: false
},

The problem goes away. This is because after the operation for loading the first page is called the reload filters event is fired. This causes the load of the first page to be aborted. The page should be reloaded but it appears that it is not. The data is there, the page data is loaded but the indexMap does not have the values set. So when the load is aborted the page is not property removed so it will be reloaded. I am still down the rabbit hole looking for a solution.

This is broken in 7.3.0 as well. I have narrowed it down to the location object is not getting set correctly for the first page. There are several problems with the location the primary problem I see is the recordIndex is not set correctly, it is still the default value of -1. And the record is not set. And this is of course only the first page of records on the infinite store. The location object is missing other data as well. It looks like it is not getting set. the childtap event is getting called but the location of course is wrong. I am looking at why the location is not correct.... will report back if I figure it out.

edit: The system can't find the record by InternalId because the indexMap does not have the records for the first page. The onPageLoad event is not begin called for the first page. Still looking.