Grid panel header not giving space for vertical scrollbar

Question

So I have a grid panel that has auto scrolling, either horizontal or vertical. The grid panel will be displayed after a search button is clicked. The panel will then give a space for the vertical scrollbar, if it has many data. But whenever I sort or go to the next page, it will not give header a space for the vertical scrollbar. It will look like this ↓

Whenever I go to the last page which has no vertical scrollbar, and then go back to the first page which has a scrollbar, it will give space on header for the vertical scrollbar. Just going to next page and then back to the previous page, and the sorting too, it will not give space.

I think the pattern is that when the panel has no scroll at first, it will give a space, but whenever the panel had a scroll already and then it will not give space for the header.

Btw, I cannot use the reserveScrollbar because the client wants the auto scrolling.

This is my view:

Ext.define('Uph.view.contents.approval.ListGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.apv-listgrid',
    id: 'apv-listgrid',
    enableColumnHide: false,
    scrollable: true,
    columnLines: true,
    columns: [{
        text : 'Time',
        itemId: 'grAplDatetime',
        flex: 1,
        width: 60,
        dataIndex: 'aplDatetime',
        renderer: function(value) {
            if ( !value || value.length === 0 ) {
                return '';
            }
            return Uph.Function.formatYmdHi(value);
        }
    },{
        text     : 'Group Name',
        itemId: 'grPageName',
        flex: 1,
        width: 60,
        dataIndex: 'pageName',
    },{
        text     : 'Detail',
        width: 50,
        resizable: false,
        itemId: 'grDetail',
        sortable: false,
    },{
        text     : 'Preview',
        width: 80,
        resizable: false,
        itemId: 'grPreview',
        sortable: false,
    },{
        text     : 'Appr',
        width: 50,
        resizable: false,
        itemId: 'grApproval',
        sortable: false,
    }],

    bbar: {
        xtype: 'cps-pagingtoolbar'
    },
    viewConfig: {
        loadMask: false,
        listeners: {
            refresh: function(v) {
                Ext.resumeLayouts(true);
            }
        }
    }
});

Hope someone can help me. Thank you.

Answer 1

After million years, finally I solved this problem by deleting a code from a custom Pagination class which extended the 'Ext.toolbar.Paging'.

I deleted this one and now it works okay:

Ext.suspendLayouts();

And this one also since it's no use anymore:

Ext.resumeLayouts(true);

I was tasked to upgrade from extjs4.2 to extjs6.5, so maybe it worked perfectly on that version but somehow it caused some problem on the newer version.