When using the gridPanel component of EXTJS, the stroe data in gridPanel is often filtered, so the scrollbar brought by gridPanel itself is sometimes invalid.
Take an example. The scrollbar that comes with EXTJS gridPanel has a fixed column width to place the scrollbar, as shown in the figure above. So when this scrollbar fails, no matter how you drag the scrollbar, the data in the grid will never display the data in the corresponding area as the scrollbar moves (in other words, the data you always see is the records in the screenshot).
As for why gridpanel fails? It is not clear what the reason is yet to be. Previously, people encountered similar problems on Extjs forum and stackoverflow, but the versions may be both before 4.1. Extjs' dev team said that they have fixed this problem since 4.1 (not sure, I hope to use the 4.1 version of children's shoes for argument).
Okay, let’s talk about how to solve the failure of scrollbar.
xtype: 'gridpanel',// autoScroll:true,scroll:false, viewConfig: {style: { overflow: 'auto', overflowX: 'hidden' }}You can see that the autoScroll property is disabled, and the scroll is set to false, and then the viewConfig is set. Here, the horizontal scroll bar is disabled, leaving only the vertical scroll bar. OK problem solved, see the effect:
At this time, you will find that the scrollbar has no inherent column, but is merged with the last column of grid. The scrollbar that comes with gridPanel is disabled.
This potential bug was also solved.
However, this usage is best to set all columns in the grid to a fixed width and set properties:
resizable:false
This can avoid some unnecessary troubles caused by disabling horizontal scroll bars.