EXTJSIV-6313 can still occurs if variableRowHeight: true

[panpur]

REQUIRED INFORMATION
Ext version tested:

• Ext 4.1.1

Browser versions tested against:

• Chrome 23

Description:

• Fast scrolling on infinite grid with variableRowHeight, sometimes causing partially empty grid to be shown.

Steps to reproduce the problem:

• Do fast scrolling on infinite grid with variableRowHeight, repeatedly

The result that was expected:

• Grid data should be correctly displayed

The result that occurs instead:

• Partially empty grid sometimes displayed
• "Uncaught TypeError: Cannot call method 'getXY' of null" may also occurred

Test Case:
http://jsfiddle.net/panpur/wufyQ/


HELPFUL INFORMATION
Screenshot:

• empty.png

Additional CSS Used:

• .x-grid-cell-inner {
  white-space: normal !important;
  }

Operating System:

• Win 7

[mitchellsimoens]

Using one of the examples that comes with 4.1.1 and Chrome I cannot reproduce this an dI'm scrolling as fast as I can changing directions a lot

[panpur]

Which example is that?
AFAIK none of those infinite grid examples having variable row height.

[panpur]

Ok, I've added a test case on original post and also a new screenshot.
The test case is basically infinite-scroll.html example with slight modifications, which are:
- Set Topic column width to 150
- Add CSS to allow wrap
.x-grid-cell-inner {
white-space: normal !important;
}

Please note that the occurrence is quite rare, but it happens,

[panpur]

Actually this is not related with EXTJSIV-6313, so the title is wrong.
Looking at chrome developer console, it seems that the table is not correctly positioned.

<table class="x-grid-table x-grid-table-resizer" border="0" cellspacing="0" cellpadding="0" style="width: 1018px; position: absolute; top: 216.07164179104478px;">

Notice that "top:216.07164179104478px", I think it should be 0.
I've also added example url on the original post so that ExtJS devs can test it.

[panpur]

I've found a workaround. Put this code on onViewScroll function in PagingScroller.js to make sure the table positioned correctly.

var top = parseInt(view.el.child('table', true).style.top.replace('px', ''));

if(me.position < view.el.dom.clientHeight && top > me.position) {
    me.position = 0;
    me.setTableTop(0);
}