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.

maryyyyyyy maryyyyyyy · Accepted Answer · 2018-06-15T02:20:42

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.

Grid panel header not giving space for vertical scrollbar

1 Answers