2

Background: We have used ExtJS 6 to develop our application. In one of the view we have used dataview inside Tab panel. Scrollable is enabled for this dataview. We have specified X-UA-Compatible mode to Edge. Working condition: Windows 7 + IE11 (Edge mode) + Smart Card authentication Not working condition: Windows 10, IE11(non Edge mode) + Virtual Smart Card authentication (although this condition is not sure)

Issue: This view renders perfect on Windows 7 platform on Chrome as well as IE11 (Edge mode by default). It shouts out issue while rendering on Windows 10 platform on IE 11. On this platform, IE11 doesn't have Edge mode in IE11 browser (separate Edge browser available), hence the application runs in IE11 mode itself by default. While rendering this view even before the data is loaded, it throws error as "can not access n.dom from null or undefined" (I may not have written exact error description).

Analysis: On analysis it is found that, refresh method of dataview is being called somehow, and it doesn't find its target element. Exact location of error is in refresh method of dataview at me.getTargetEl(). On troubleshooting it is found that the scroll feature (enabled by scrollable:true) is trying to refresh view even before it is rendered, hence it doesn't find the target DOM element.

Resolution: Although, we didn't find solution within ExtJS, we disabled scrollable for dataview and rendered scroll by style using overflow property. e.g. style: { overflow: 'auto'} This resolved the issue as scroll is added without scrollable being enabled.

Amol
  • 21
  • 2
  • I have also tested the ExtJS official sample with IE browser, the sample also use the CSS `overfolow:'auto'` style to scroll the dataview. Perhaps it is ExtJS default behavior or a bug. I suggest you could try to submit the feedback regarding this issue to ExtJS forum. Besides, thanks for sharing the solution here, I suggest you could try to post the solution as a reply/answer and mark your own answer as an accepted answer for this question after 48 hrs, when it is available to mark. It can help other community members in the future in similar kind of issues. Thanks for your understanding.^_^ – Zhi Lv Apr 06 '20 at 02:56

2 Answers2

0

Posting the resolution as the answer.

Analysis: On analysis it is found that, refresh method of dataview is being called somehow, and it doesn't find its target element. Exact location of error is in refresh method of dataview at me.getTargetEl(). On troubleshooting it is found that the scroll feature (enabled by scrollable:true) is trying to refresh view even before it is rendered, hence it doesn't find the target DOM element.

Resolution: Although, we didn't find solution within ExtJS, we disabled scrollable for dataview and rendered scroll by style using overflow property. e.g. style: { overflow: 'auto'} This resolved the issue as scroll is added without scrollable being enabled.

Amol
  • 21
  • 2
0

Use this

scrollable: {
    y: 'scroll'
}
Andrew Koshkin
  • 446
  • 3
  • 16