ExtJS 4 - Grid Vertical ScrollBar issue

Question

In our application, we have a window containing a Grid and two buttons - Clear & Retrieve.

The user can load the records from the server in the grid by clicking on the Retrieve button and can then clear the grid store by clicking on the Clear button.

The problem is that sometimes the vertical scrollbar does not work when the user loads the grid for the second time.

That is, if the user first clicks on the Retrieve button to load the records and then uses Clear to empty the grid - and again clicks Retrieve, then this second time the vertical scrollbar does not work in the grid.

In fact, the vertical scroll bar works only for the first time and then it stops working until the user reloads the whole page again by refreshing the browser window.

The weirdest thing is that this issue is not 'consistent'. That is, this issue occurs only sometimes without doing anything extra. It is the same Retrieve and Clear buttons which are clicked, same data which comes from the server, but the scrollbar just stops working sometimes without displaying any error.

This gets very annoying for the user and as it is also not displaying any error, thus, its being very difficult to diagnose.

Has anyone faced a similar issue or could anyone please point to something useful which could be of help in this.

Some information about the environment I'm working in:

• ExtJS Version - 4.0.7
• Browsers Checked - IE8, IE9, FF4+, Chrome10+

Solution 1

Me too I've experienced problems with scrollbars on grid panels. It seems that the solution is to set the height but also the width of the grid. Try also to use this method on load event of the linked store:

grid.determineScrollbars();

Solution 2

I've experienced problems with the ExtJS scrollbar (where it either stops working or it gets cut off, or won't resize itself), I can't give anything concrete without a code sample but I've handled it each time by doing one of the following:

1) putting the offending component in a viewport (wouldn't work for your window though)

2) setting a definite height in the component config

3) adjusting the layout config (either fit or border seemed to work)

You could also try yourGridPanel.doComponentLayout() with a successful dataStore load (when your retrieve method executes).

Solution 3

maybe you should update Extjs lib to 4.1.1 version. As for me 4.1.1 version includes fixes for some grid scrollbars issues, which i solved by patching in 4.0.7.