Solution to the failure of the built-in scroll bar of Extjs grid panel_extjs

When I used the EXTJS gridPanel component before, because the strobe data in the gridPanel was often filtered, sometimes the scrollbar of the gridPanel itself would fail.

Take an example. The scroll bar that comes with EXTJS gridPanel has a fixed column width to place the scrollbar, as shown in the picture above. So when the scrollbar fails, no matter how you drag the scroll bar, the data in the grid will never display the data in the corresponding area as the scrollbar moves (in other words, the data you will always see is in the screenshot) these records).

As for why the gridpanel fails? It is not yet clear what the reason is. Some people have encountered similar problems on the Extjs forum and stackoverflow before, but the versions may be before 4.1. The dev team of Extjs said that they have fixed this problem since version 4.1 (not sure, I hope I have used version 4.1) Children's shoes argument (under the argument).

Okay, now let’s talk about how to solve the problem of scrollbar failure.

xtype: 'gridpanel',
// autoScroll:true,
scroll:false, 
viewConfig: {
style: { overflow: 'auto', overflowX: 'hidden' }
}

As you can see, the autoScroll attribute is disabled, scroll is set to false, and then viewConfig is set. Here, the horizontal scroll bar is disabled and only the vertical scroll bar is retained. OK problem solved, see the effect:

At this time, you will find that the scroll bar no longer has its own column, but is merged with the last column of the grid. The scrollbar that comes with the gridPanel is disabled in this way.

This potential bug is also resolved.

But for this usage, it is best to set a fixed width for all columns in the grid and set the attributes:

resizable:false

This can avoid some unnecessary troubles caused by disabling the horizontal scroll bar.